Integrate BotStar with Website

There are two ways to integrate a chatbot to Websites in BotStar:

1. BotStar’s Website Chat Plugin: A proprietary live chat widget is built by BotStar. It's highly customizable for better branding. Your chat users won't have to log-in to start a conversation.

2. Facebook Messenger’s Customer Chat Plugin: It allows you to integrate Messenger directly into your website. Chat users on the website can receive broadcasts via Facebook Messenger.

Set up BotStar Web Widget

Go to Bot Builder > Publishing Configuration > Website.

For each option, the system generates an embedded code so that you can insert it into the HTML code of your website. BotStar also offers some settings to customize Web Widget.

Copy the code snippet in Embedded Code and insert it into the HTML code of your website right before the </body> tag.

BotStar’s Website Chat Plugin

  • Embedded Code with Display Modes: Generated code with selected display mode to insert bot into your webpage, you can insert one bot per webpage. See how each of the displaying modes works in the detailed section below.
  • Whitelisted Domains: The list of domains allowed to insert bot by using the Website Chat Plugin. Your chatbot will only run on these websites.
  • Show Entry Block First: Entry block is always the first message Facebook Messenger users see upon the first time they chat with the bot on Web Widget.
  • Prompt User Automatically: Show chat popup automatically upon the web page finishes loading instead of clicking on the chatbot icon.
  • Do Not Keep Conversation History: Next time your users chat with the bot again, they will be not shown the previous conversations. We do not recommend this behavior unless it fits your business scenario.
  • Greeting Message (on/off): Enable/Disable your greeting message for first-time customers.

Branding Options:

  • Custome Name: Display name in the chatbox of the Website Chat Plugin, the default name is BotStar Widget.
  • Theme Color: Choose the primary color for your chatbot widget. It is recommended to choose the colors that show your Brand or match the Website.
  • Display Avatar: We recommend using a personalized picture of your brand. The picture should be transparent hight quality PNG.

Facebook Messenger’s Customer Chat Plugin

  • Whitelisted Domains: List of third-party domains that are accessible in the Messenger webview. You can also publish your chatbot for the whitelisted domains (websites).
  • Display Chatbot Dialog: How the chat dialog appears.
  • Theme Color: Choose the primary and secondary color for your chatbot widget. It is recommended to choose the colors that show your Brand or match the Website.
  • Greeting for user: Greeting for users returning to Bot after chatting.
  • Greeting for guest: Greeting for the first time users chat with Bot.

Display Modes for Widget

Livechat

Inline

Popup

Fullpage


Livechat

In-line

Pop-up

Fullpage

Note: For Facebook Messenger’s Customer Chat Plugin, you are only able to use the "Livechat" mode.

Record Website Audience

How is a Website Audience Counted?

Unlike Facebook Audience, a Website Audience is not recorded by default, you will need to disable the option "Enable Guest User" first. Each visitor can associate with one proper email address which makes them an audience.

We provide two methods to use in combination or separately, please choose the best way in order to successfully record your Website Audience.

Note: For Facebook Messenger’s Customer Chat Plugin, an audience is recorded the same as running on Messenger.

1. Using Add Subscriber action inflow

You can utilize the Add Subscriber action to ask your website visitors to leave their email addresses, names before continuing the rest of the designed flow. When using the action, your website visitors will not be able to continue the flow unless they fill in a correct email address and non-empty of their name.

It is recommended to customize the Prompt Message to fit your flow and business it serves.

2. Using Widget JS API on the Website

With this method, you are required to have viable knowledge of JavaScript.

Widget JS API provides you advanced functionality to control the widget on your website and ability to feed your bot with your user information. It is one of the possible ways to turn your existed users into your Website Audiences on BotStar.

Various usages of the provided API includes:

  • Update current visitors/ audiences with essential data: names, emails, pictures, user attributes, and tags.
  • Open/ close the widget (available to Livechat and Popup mode).
  • Listen to the event of widgets open/close to perform extra functions.

Follow our Widget JS API Reference for more details of using this method.

Update Bot

After changing the settings for the bot, please go to Publish your Bot > Update.

Note: All changes only apply after updating the bot. You can also take off your bot at any time by clicking on the Shut Down button.

Sound notifications

The Inbox notifications is a feature which notifies chat users or operators about new messages from each other. With Inbox notifications, you would find the chatbot more convenient when using it.

The setting process is quite simple:

Step 1, You should click on your Avatar > Account > In Account Profile, enable “Inbox Notifications”. When you are done with this step, operators or collaborators would hear the sound and see the blink from the browser tab.

Step 2, Go to the bot you want chat users to get notifications: Bot Builder > Publishing Configuration > Website > in Notification session, enable “Play Sound”.

Once this button is enabled, if chat users choose to talk to staff through “Human Takeover” action, they will receive a sound notification when there are new messages from operators.

Note: This feature works in case the tab is still active. If the chat user turns off the window, he/ she will not hear any sound notification.

Please refer to the documents below if you are publishing bot on:

If you have any concerns, please feel free to leave a comment below or contact us through support@botstar.com. For more details on how we have helped our customers grow their business, you can view our use cases, blogs or join our BotStar community to learn and share new things 😊


Did you find it helpful?   Yes   No