Channel: Web Widget
Connect your AI Assistant to your website
Last updated
Was this helpful?
Connect your AI Assistant to your website
Last updated
Was this helpful?
After Select Channel > Web Widget, you will be taken to the Customize Web Chat view. This is where you will set up your Chatbot to make it compatible with your website.
SUMMARY
Creating a Web Widget Chat Flow involves these steps:
Choose Web Widget: In Step 2: Select Channel, choose "Web Chat." This brings you to the Customize Web Chat window.
Add preset text: Use the Text Options to modify the Web Widget's public name and default message.
Add colors: Use the Color Options to change the overall color palette of your Web Widget.
Change images: Use the Image Options to personalize your Web Widget further with images, logos, and headers.
Set a schedule: Use the Working Hours to select times of the day and days of the week that the Web Widget will be active.
Copy the Web Widget code: The Embed Web Widget will provide a working code that you can give to your web administrator for implementation in your website.
in Text Options, you can customize the basic text that appears with your Chatbot once it becomes a Web Widget. This portion has the following components:
Title: This is the "main greeting" that the AI Chatbot will provide before starting a conversation.
Group Name: This is the "public name of the Chatbot. You can name this after yourself, your team, or your company. In the image above, its name is "Captivate Chat Bob."
Widget Text Description: This is the invitational message your Chatbot reveals when users click it for the first time.
In Color Options, you can customize how your AI Chatbot appears in your website using a wide array of color options:
Primary Color
Bubble Background (User, Bot, Agent)
Chat Text (User, Bot, Agent)
Chat Buttons (Background, Text)
Fit your Web Widget colors to your branding!
Switch up your Web Widget colors to match your branding. Select the square icon beside the hexcodes to open a color palette where you can choose your preferred colors.
In Image Options, customize your Chatbot further with options that add "personality" to them. These include:
AI Chatbot Avatar: This is how your Chatbot appears in the Web Widget.
Widget Icon: This is how your Chatbot appears as an icon before expanding into a chat box. It can be the same icon as your AI Chatbot Avatar.
AI Chatbot Business Image: This represents the icon or logo of your branding or business.
AI Chatbot Chat Header Image: This is the unique background that comes with your AI Chatbot Avatar.
Use high-quality resources
Since your Chatbot is an extension of your branding, it's important to use high-quality resources such as images for elements such as your AI Chatbot Avatar and Business Image.
In Working Hours, determine your Chatbot's working hours. You can choose its Start Time and End Time, and specific days of the week you want it to function. Here are your main considerations:
If you want your Chatbot to connect users to Live Agents, try to set the Chatbot's schedule to match that of your team's for a more seamless experience.
You can keep your Web Widget live 24/7 even with work hours toggled
If you don't want to toggle "Enable Work Hours," you can still keep your Web Widget live indefinitely. You can do this by adjusting the "Start Time" and "End Time" to 00:00.
After setting the above options, we'll create an embed code you can copy and paste into your website. The Embed Web Widget section has this code:
Traditional Embed Web Widget HTML Code:
<script src="https://widget.prod.captivat.io/captivate.min.js"></script> <script> function callWidget(data) { Captivate.init({ apiKey: "YOUR_API_KEY_IS_HERE", )} } callWidget(); </script>
Please take note that apiKey: "
YOUR_API_KEY_IS_HERE
"
contains your Web Widget's API Key, which you can use in other Captivate Chat features such as full screen embeds and potential future additions.
If you want to insert your Web Widget Chat Flow into your website, there are two ways to do so:
Using the HTML code from the "Embed Web Widget" stage will give your webpage access to a traditional web widget. This takes the form of an icon on the lower left of your screen that transforms into a chat when clicked.
These traditional web widgets are often used as customer assistants in most websites that provide products and services.
Alternatively, users can also insert their Web Widget Chat Flows into their websites as full screen embeds. Unlike traditional web widgets that take the form of an icon that expands into an AI Chatbot, a full screen embed takes up the size specified in a special <iframe>
code.
Full screen embeds are perfect for websites that want to have a dedicated page where users can interact with AI Chatbots.
To transform your Web Widget Chat Flow into a full screen embed, simply copy this code:
Full Screen Embed HTML Code:
<iframe src="https://your-deployed-url/?apiKey=YOUR_API_KEY" width="100%" height="100%" frameborder="0" allow="clipboard-write" ></iframe>
When modifying this <iframe>
code, take note of these things:
Replace your-deployed-url
with the link of the webpage where you want to deploy the full-screen widget.
Replace YOUR_API_KEY_HERE
with the API key of your Web Widget, as seen in the "Embed Web Widget" stage of the "Customize Web Widget" page.
Ensure the allow="clipboard-write"
attribute is included if you need to enable clipboard functionality within the widget.
Ensure the width
and height
attributes are at 100% to fit the widget into your layout appropriately.
Give your HTML embed code to your Web Administrator
Make sure that your embed is pasted before the closing </body> tag on pages of your website where you want the AI Assistant to show up. Your Web Administrator should know how to make this work.
Doing all the steps above should get your Chatbot ready to be used with a Web Widget.
Disable Working Hours: Toggling off means the Web Widget won't follow a schedule and provide 24/7 coverage. This is perfect if your Web Widget is designed solely to answer questions and not connect users with live agents.