Beginner Guide : How to Add Your Custom GPT to Your Website with No Code

Last November, OpenAI introduced a new way to create tailored versions of ChatGPT, known as Custom GPTs. These allow you to customize the AI to perform specific tasks or roles, all without writing a single line of code.

What Are Custom GPTs?

Custom GPTs can have various functionalities, such as:

• Retrieval: Answer questions or complete tasks based on provided documentation (e.g., FAQs).
• Code Interpreter: Run and execute Python code.
• Function Calling: Call external APIs to send emails or scrape data and etc.

These features make it easy for non-developers to build powerful AI assistants.

The Challenge

The main issue with Custom GPTs is that they typically can’t be used outside the ChatGPT interface without coding and leveraging the Assistant API. Meaning you cant use this in whatapp , your website, slack and other communication channels.

This guide will show you how to overcome this limitation using a tool called oai-widget to add your Custom GPT to your website without any code. If you want to watch the full video on how to do this - click on the link

Step 1 :

Go to oai-widget and log in. Navigate to the “Assistant” tab and click “Create Assistant” in the top right corner.

click on Create New on the top right corner

1. Click “Create New” and enter your OpenAPI Key. If you don’t have one, follow this guide to create it.

Once your openai key is created it will show up on the drop down menu

2. Select your API key from the dropdown menu and click “Create”.

Step 2: Configure Our Assistant

Where we will configure our Assistant

Now that we have created our Assistant, let’s configure its parameters:

Note: The parameters I’m setting are just examples. Feel free to customize these values to suit your needs. You don’t have to use the exact values I’m using.

1. Name: Set it to CustomGPT-Demo.

2. Description: Use AI Assistant for my Website.

3. Instructions: Enter the following prompt:

Using the provided PDF file, answer any customer questions about the types of AI agents we build and sell. Dont mention that you are getting this info from a PDF File. If a customer expresses interest in scheduling a meeting, ask them for their name, email, phone number, and a detailed explanation of what they want built. Once you receive their information, use the Apify function to send their proposal to my email ([placeholder]@gmail.com).

4. Model: Select the GPT-4 model.

Now your Assistant should look like this:

Current Parameters for Your CustomGPT

Step 3: Configure the Capabilities or Tools are CustomGPT

The first capability we want to add is Retrieval so our AI Assistant can answer questions based on the information provided in a PDF file. Follow these steps:

1. Enable Retrieval: Click on the square block next to the “Retrieval” text to enable this functionality.
2. Upload PDF: Click on the drop files menu below “Retrieval” and select the PDF file you want to upload. This PDF will serve as the knowledge base for your AI Assistant.

By enabling retrieval and uploading your PDF file, your Custom GPT will be able to reference the document to answer user questions accurately.

In my case Im using the Examples of AI Agents we can build pdf file [can click the link if you want to check out the knowledge base Im using]

Downloading my pdf file

Now that you have attached your knowledge base, follow these steps to give your Custom GPT the ability to use external tools, such as sending emails:

1. Create New Action: Scroll down to the “Actions” section and click on “Create New Action”.
2. Enable External Tools: This is where you will give your Custom GPT the ability to use external tools. For this example, we’ll configure it to send emails to your account.

By adding this action, your AI Assistant will be able to perform tasks like sending emails based on user interactions.

Click Create new Action down below

Step 3.5 : Adding Function Calling Capabilities to your Custom GPT or AI Assistant

To give your Custom GPT the ability to call external functions, such as sending emails, follow these steps:

1. Visit Apify: Go to Apify.
2. Login: If you haven’t already, log in to your Apify account.
3. Access the Store: Navigate to the Apify Store by visiting Apify Store or clicking on the store tab on the left-hand side.
4. Search for Send Email: In the search bar, type “send email” and look for the tool named apify/send-mail.
5. Select the Tool: Click on the apify/send-mail tool to view its details.

click on send email after searching it up

After selecting the apify/send-mail tool, follow these steps to access its OpenAPI specification:

1. Navigate to API: On the right-hand side of the tool’s page, click on the “API” tab.
2. OpenAPI Specification: From the dropdown menu, select “OpenAPI Specification”.

By doing this, you will access the OpenAPI schema needed to configure your Custom GPT to use the send email function.

Click on API and OpenAPI specification on the right hand side

After accessing the OpenAPI specification, follow these steps:

1. Copy the Schema: Copy the OpenAPI schema displayed on the screen.
2. Return to OAI-Widget: Go back to the assistant you were creating in OAI-Widget.
3. Paste the Schema: In the schema block that appeared when you clicked “Create New Action”, paste the copied OpenAPI schema.

By doing this, you will configure your Custom GPT to understand how to use the send email function through the OpenAPI schema.

The OpenAPI specification you will copy

This is where you will paste the schema in oai-widget

To give you a short breakdown of the use case of the openapi schema we just copy and pasted into our Custom GPT/AI Assistant :

The OpenAPI schema helps the AI Assistant understand how to use a specific tool by providing the following:

1. Endpoint Information: It tells the AI where to send the request (e.g., a URL).
2. Tool Description: It explains what the tool does so the AI knows when to use it (e.g., sending an email).
3. Parameters: It specifies what information (parameters) the AI needs to get from the user (e.g., email address, subject, email body) and include in a JSON object.

Calling the Function:

• When the Custom GPT needs to send an email, it creates a JSON object with the required details like recipient email addresses, subject, and email body.
• The AI sends this JSON object to the specified URL using the POST method.
• And tool or api we are using runs and sends the email

After configuring the OpenAPI schema, follow these steps to add your Apify API key to your Custom GPT:

1. Settings: On the left-hand side of OAI-Widget, click on “Settings”.
2. Integrations: Go to the “Integrations” section.
3. API Token: Copy the password from the “Personal API token” section.

Where to find your API token

Follow these steps to configure the authentication for your Custom GPT:

1. Return to OAI-Widget: Go back to your assistant in OAI-Widget.
2. API Token: In the “Authentication” section, click on the circle next to “API token”.
3. Auth Type: In the “Auth type” section, click on the circle next to “Bearer Token”.
4. Paste the Token: Paste the API token you created into the “API Key” section.

Click Apply and Save : Then click on the apply button on below the schema field on the right hand side. Then the save button on the button right side

By doing this, you will authorize your Custom GPT to use the Apify functions, enabling it to send emails based on user interactions.

5. Click Apply and Save : Then click on the apply button below the schema field on the right hand side. Then the save button on the button right side below the api key section.

API Key Section

Click Save button on the right

Now your Assistant should look like this

For the final touch, follow these steps to customize the logo for your assistant:

1. Change the Logo: Go to the top of the OAI-Widget interface.
2. Select Image:

• DALLE Option: Click the “DALLE” button to have AI create an image for you.
• Upload Image Option: Click on the icon and choose an image from your computer to use as the logo.

By customizing the logo, you can give your AI Assistant a unique and professional appearance that aligns with your branding.

Your icon

Follow these steps to create a widget for your Custom GPT:

1. Navigate to Widget Section: Click on “Widget” on the left-hand side of the OAI-Widget interface.
2. Create Widget: Click on “Create Widget” in the top right-hand corner.

This will allow you to set up a widget that you can embed on your website, enabling users to interact with your AI Assistant.

Widgets Section

Once you begin creating your widget, you will need to set several parameters. Follow these steps:

1. Name: Set it to AI Assistant.
2. Description: Enter Help you with any questions about the AI Services we offer.
3. Start Message: Set it to Welcome! How can I assist you today? (This is the first message the Assistant will send when the user opens the chat window).
4. Input Placeholder: Enter What are AI Agents? (This is the suggestion the AI gives to the user on what questions to ask).
5. Chat Persistence: Select Never Forget (Whether you want the AI Assistant to always remember conversations even when the chat window is closed).
6. Position: Leave it at the default value (How you want the size and positioning of your chat window to look on the website).

By setting these parameters, you customize how your AI Assistant will appear n your website.

How my parameters look right now

Next, configure the appearance of your widget:

1. Appearance Section: Navigate to the “Appearance” section.
2. Logo and Colors: Choose the logo and colors you want your chat window to have.
3. Mode: Select whether you want the chat window in light or dark mode.

By customizing these settings, you can ensure that the chat window matches your website’s design and branding.

Appearance Section

In the next section, configure the OpenAI settings:

1. OpenAI Section: Go to the “OpenAI” section.
2. Select Assistant: Choose the assistant you want to use. In this case, select CustomGPT-Demo.
3. Save: Click the “Save” button.

Note: For Custom GPTs with function calling capabilities, there is a $5 monthly fee.

By selecting your assistant and saving the settings, you ensure that the widget uses the correct AI Assistant configured earlier.

Click on the Assistant you want to use

To embed your widget on your website, follow these steps:

1. Return to Widget Section: Go back to the “Widget” section.
2. Open Options: Click on the three dots located at the top of the new widget you created.
3. Embed: Select the “Embed” option.

By doing this, you will access the embed code needed to place the widget on your website.

Embed button

Follow these steps to embed the widget code into your website:

1. Copy the Code: In the “Embed your widget” section, copy the provided code.
2. Add to Website: Paste this code either in the head section or at the beginning of the body section of your website’s HTML.
3. Framer Example: For this demo, we’ll add the code to Framer, but the same concept applies to any website builder that allows you to add custom code to the head or body sections. Which most should.

By embedding the code, you will integrate the AI Assistant widget into your website, making it accessible to your visitors.

Copy this code into the head or body of your website

To embed the widget in Framer, follow these steps:

1. Go to Framer: Open your web browser and go to Framer.
2. Select Your Project: Click on your project, in this case, the “ArbitrageAI Agency” website.

By accessing your project in Framer, you’ll be ready to embed the widget code into your website.

Framer Projects

Follow these steps to embed the widget code in your Framer project:

1. Open Settings: Click on the “Settings” button in the top right-hand corner of your project.
2. Scroll to Body Tag: Scroll down to the “Start of <body> tag" section.
3. Paste the Code: Paste the copied widget code into the provided box.
4. Save and Publish: Click the “Save” button in the Custom Code section, then click “Publish” on the right-hand side, and finally, click “Update”.
5. Visit Your Website: Go to the link of your website to see the changes.

By following these steps, you will successfully embed the AI Assistant widget into your Framer website, making it live and functional.

Body tag where the code is supposed be posted

After embedding the code and publishing your website, follow these steps to verify the AI Assistant widget:

1. View Your Website: Go to the link of your website.
2. Check Widget: You should now see the AI Assistant widget on the bottom right corner.
3. Open Chat Window: Click on the widget, and the chat window should open.

By verifying the widget’s presence and functionality, you ensure that your AI Assistant is ready to interact with visitors on your website.

The Chat Window

To ensure your AI Assistant is functioning correctly, follow these steps:

1. Ask Questions: Interact with the AI Assistant by asking a couple of questions, such as:

• “What are AI Agents?”
• “Can you build me an AI Agent for my website that can capture lead’s information on a Google Sheet?”

By testing these questions, you can verify that your AI Assistant is capable of understanding and responding appropriately to user inquiries.

In picture you see the reply the Assistant gave

Now after my second question its asking for the details so it can forward me an email

Will Now give it the details

The response the Assistant gave me

The email it sent to me

Additional Resources:

• Full Youtube Video on How to build and add an AI Assistant to your website with no code
• If you want to learn how to build AI Agents using the OpenAI Assisstant API : Building a AI Sales Agent using OpenAI’s Latest Assistants API [YouTube Tutorial]