How to Embed ChatGPT in your Website

In this article we're going to show you how you can easily embed a ChatGPT chatbot in your website.  The embedded ChatGPT bot is customizable, can use the latest models from OpenAI and just uses your own OpenAI API Key so you have full control over models how ChatGPT is managed, which plugins, are used, and how the bot is trained.

With your embedded ChatGPT website live chat, you can customize the look and feel, set up human escalation, and integrate the embedded ChatGPT bot directly with agents in Microsoft Teams, Slack, Zoom and Webex.  You set up keyword intents that trigger escalation to humans and you can monitory active chats so your company can respond to your website visitors at the appropriate time in the conversation.

Here are some things you can do with your embedded ChatGPT Chatbot:

  • Pre-qualify your leads with a chatbot
  • Choose your ChatGPT model including ChatGPT 4
  • Set up initial System messages for the ChatGPT API
  • Setup Human Escalation Trigger phrases that will invite agents to your visitor conversations
  • Send links to important URLs
  • Register leads to your service with a chatbot
  • Direct your website visitors to website information with ChatGPT

ChatGPT Bot embedded in your website

Here's a step by step guide to embedded ChatGPT in your website with OpenAI + Social Intents.

Prerequisites

High Level Steps

  1. Create a Live Chat app in Social Intents
  2. Create your OpenAI API Key after registration
  3. Add your OpenAI API Key to your Social Intents chatbot settings.

1. Create a Live Chat widget in Social Intents

If you don't already have an account with Social Intents, register for a 14-Day Free Trial.

Once you sign up you can pick an integration with Teams, Slack or a standalone account.  The integrations will be used to invite in Live Chat agents when you want to escalate a website chat from the chatbot to live chat agents.  You can answer chats in Microsoft Teams, Slack, Zoom, or Webex.  Otherwise, you can answer the chats directly in our web-based dashboard.

After creating your Social Intents account and adding a live chat widget, we'll generate a code snippet for you. You can copy and paste this code snippet into your website in order to enable your chatbot on your own site.  

2.  Create your OpenAI account

If you haven't already, sign up for your OpenAI account here: https://platform.openai.com/

Once logged in to OpenAI, click on your profile and select 'View API keys'

Now create a new API Key to use in your Social Intents Chatbot Settings for integration.

3. Add your OpenAI API Key to Social Intents

Now that you have create a Live Chat app, go to the Chat Settings in Social Intents by clicking on My Apps, then Edit Settings of your chat widget.  Click on the Chatbot Settings tab.

In your Chatbot Settings name your bot, choose an avatar for the chat bot and select Chatbot Type of 'ChatGPT with OpenAI'.

You can then decide how you want your chatbot to be invited into the chat.  You can have a chatbot only, then invite agents later, have it pick up only when your live chat agents are offline or miss a chat, or join the same time your agents join.

For ChatGPT Model, you can choose any of the models the OpenAI supports with the Chat API: https://platform.openai.com/docs/guides/chat

We choose the current chat model: gpt-3.5-turbo.

Copy your OpenAI API Key into the field called: ChatGPT API Key. 

Next you can customize your ChatGPT Welcome text with a Default Welcome Response, and Quick Reply buttons to help direct your users.

The Human Escalation trigger phrases can be used to match on user intent when they want to reach to a live agent.  When one of these phrases is matched, we invite your human agents by sending Live Chat Invites to Microsoft Teams, Slack, Zoom, or Webex.

Once your agents answer the chats, then the bot drops out of the conversation.

Don't forget to customize the ChatGPT Instruction Phrases to point to your website URL to help guide ChatGPT on the types of answers to provide.

4. Train your ChatGPT Chatbot with your Website Content

There are 2 parts to training your ChatGPT chatbot.  The first is to use the Instruction Phrases to allow to you send an initial System message when starting a chat to give your ChatGPT bot some context.

Generally you can use this to convey tone, types of answers, where to point visitors, etc.

Now, you can train ChatGPT with your own content easily!  Simply click on the 'Train your chatbot' button in the chatbot settings and you'll be taken to a page where you can list URL's you can use to train the bot.  

Enter a base domain or individual urls to add as content to train.  Then click Train All to train your ChatGPT chatbot on your own content.

Now you have a ChatGPT chatbot trained on your own website content and knowledge base articles!

5.  Copy your Live Chat Code Snippet to your Website

Now just copy the Live Chat code snippet to your website to enable the ChatGPT chat on your site.

Grab your code and add to your html template:

6.  That's it!  Your ChatGPT Chatbot is added on your website!

Now your website chatbot powered by ChatGPT is enabled on your website and is ready to answer your visitor questions!

Next, you can look at best practices for implementing chatbots and conversational AI at your company.

Seeing Errors? Make sure to add Billing Information to OpenAI

The ChatGPT API is only enabled on paid OpenAI plans.  Otherwise you'll see an error message response like the following from the chatbot:

You can check and add your billing information here:

https://platform.openai.com/account/billing/overview

Ready to Get Started with ChatGPT in your website?

Start our free 14-day Trial to add a website enabled live chat widget powered by ChatGPT to your website.