How to Add ChatGPT to your Website

ChatGPT for Customer Service is finally here!   

In this article we're going to show you how you can add a ChatGPT powered chat widget directly to your website.  The chatbot is customizable, can leverage the latest models from OpenAI and uses your OpenAI API Keys so you have full control over models, training phrases, and training content such as a knowledge base. 

With your ChatGPT enabled website live chat, you can customize the live chat pre-sales page, welcome questions, colors, and logos, as well as handoff chats to your human agents based on keywords.  Easily escalate these live chats to your team in Microsoft Teams, Slack, Zoom, or Webex.

Here are some things you can do with ChatGPT + Social Intents:

  • Pre-qualify your leads with a chatbot
  • Choose your ChatGPT model
  • Train ChatGPT on your website content, articles, files, spreadsheets, PDFs, and knowledge base
  • 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 a chatbot

ChatGPT Bot embedded in your website

Here's a step by step guide to creating your first website chatbot with ChatGPT and 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, simply register for a 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.

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.

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 our chatbot integration:

You can check and add your billing information here:

OpenAI Payment Settings

3. Add your OpenAI API Key to Social Intents

Now that you have created 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. 

ChatGPT OpenAI 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.

Make sure to customize the ChatGPT Instruction Phrases to point to your website url to help guide ChatGPT on the types of answers to provide.

Want more info on Chatbot Settings?

If you'd like more details on each Chatbot Settings field, you can check out this article:

https://help.socialintents.com/article/200-chatgpt-chatbot-settings

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 your chatbot will answer questions specific to the content you've provided it!

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:

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!

Get Started with ChatGPT on your website today!

Start your 14-Day Free trial at Social Intents to add ChatGPT to your website in under 5 minutes.  It's as simple as adding your OpenAI API Key into your chatbot settings!

Related Articles