How to Embed an OpenAI GPT into a Website

Overview

In this tutorial you will learn how to:

1. Extract the core prompt from an OpenAI GPT.
2. Recreate that GPT on Pickaxe.
3. Publish and deploy the Pickaxe chatbot.
4. Generate an embed code and add it to a third‑party website.

Prerequisites

• An OpenAI account with a GPT you want to embed.
• A Pickaxe account (free tier is sufficient).
• Access to a website builder that accepts iframe or embed code (e.g., Notion, WordPress, Wix, Squarespace, Webflow).

Step‑by‑Step Instructions

1. Copy the GPT’s Core Prompt

1. Open the GPT in the OpenAI GPT Store.
2. Click the Edit GPT button.
3. In the Configure tab, locate the Instructions box – this is the prompt that drives the GPT.
4. Highlight and copy the entire text.

2. Recreate the GPT on Pickaxe

1. Go to Pickaxe and sign in.
2. Click Create → Chat to open the builder.
3. Paste the copied instructions into the Role (prompt) field.
4. Optionally add an Intro Message (e.g., "What are you thinking of buying?").
5. Choose a model from the dropdown (e.g., GPT‑4 for best performance).
6. Click Continue → Publish to make the chatbot live.

3. Deploy the Pickaxe Chatbot

1. After publishing, click the Deploy button.
2. Select Embed to open the embed customization screen.
3. Choose the embed style: inline iframe, floating button, or pop‑up.
4. Customize visual options: hide title, change colors, adjust size.
5. Click Copy Code to copy the iframe snippet.

4. Add the Embed to Your Website

For Notion

1. In your page, click the + to add a block.
2. Search for Embed and select it.
3. Paste the copied iframe code and click Embed.

For WordPress

1. Edit the page/post where you want the bot.
2. Add an HTML block.
3. Paste the iframe code and save.

For other builders (Wix, Squarespace, Webflow, SharePoint)

1. Locate the option to add custom HTML or embed code.
2. Paste the iframe snippet.
3. Publish the changes.

Tips & Gotchas

• Model Choice: Pick the same model you used in OpenAI (e.g., GPT‑4) for consistent behavior.
• Branding: Use the White‑label toggle in Pickaxe to remove the Pickaxe logo if desired.
• Usage Limits: In the embed customization you can set a daily usage cap or a pay‑wall if you plan to monetize.
• Testing: After embedding, test the chat on the live site to ensure the iframe loads correctly and the bot responds.
• Responsive Design: Adjust the iframe height/width in the embed settings to fit mobile screens.

Sources: Video transcript and description from YouTube, Pickaxe blog posts on embedding AI chatbots, and the Pickaxe platform interface.