Embed Conversational AI in your Website

In this article we're going to show you how you can easily embed Conversational AI into your website today to enable you to quickly answer your visitor questions with AI chatbots trained on your own custom data.  

What is Conversational AI?

First things first.   What exactly is Conversational AI?  Typically it's just a fancy way of describing an AI chatbot that can answer visitor questions. Conversational AI enables websites to have real-time, human-like conversations with users, providing instant assistance, answering queries, and even facilitating transactions. Whether you're a business owner looking to boost sales, a customer support team striving for round-the-clock service, or simply a web enthusiast curious about the future of online interactions, this comprehensive guide will walk you through embedding Conversational AI into your website.   You can find out how conversational AI can drive meaningful engagement with your audience and transform your website into an interactive and intelligent virtual assistant.

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

  • Pre-qualify your leads with an AI chatbot
  • Handle customer questions when your agents are not available
  • Choose your Open AI ChatGPT model
  • 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 Conversational AI 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 Conversational AI 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 Conversational AI Chatbot with your Website Content

There are 2 parts to training your ChatGPT AI 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 Conversational AI is embedded in your website!

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

Ready to Get Started with Conversational AI in your website?

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