Adding Widget to Webpage
To add the chat widget to your website, first login to theBotsplash platform. At the top, select the “Settings” tab.
Next, select channels from the menu on the left side of the page. Click on the “Website” box.
This will prompt a pop-out window where you can add the website domain that you want the chat widget to be displayed on. The friendly name is a way to stay organized within the platform with a title for the website instead of a URL.
Next, select “Chat Widget” from the left-side menu. Then, click on the “Chat Widget Script” box.
This will open a pop-out window containing the script unique to your Botsplash platform that you can copy and paste onto the webpages that you want your chat widget to be displayed on.
Button Click for open Chat widget:
After the chat script is on your webpage, you can begin customizing it. To prompt the chat widget to open upon the click of a button, we have a few script examples for different platforms.
HTML Page:
f24c30ff-9dde-4b30-a47c-c4acf4cab30d: This is your account’s ID found in the chat widget script from the first part of this article. It will not match this example ID.
Post data to the Chat Widget
Below are the instructions to send information collected on your site into the Chat Widget.
<script>
window.BOTSPLASH_APP_PARAMS = {
"visitor" : {
"firstName" : "VISITOR_FIRST_NAME",
"lastName" : "VISITOR_LAST_NAME",
"email" : "VISITOR_EMAIL",
"phoneNumber" : "VISITOR_PHONE",
"state" : "VISITOR_STATE",
"zipCode" : "VISITOR_ZIPCODE",
"custom" : { "loanpurpose": "VISITOR_LOAN_PURPOSE" }
}
};
</script>
Followed by the Chat Widget Script
<script type="text/javascript"></script>
window.BOTSPLASH_APP_ID="f24c30ff-9dde-4b30-a47c-c4acf4cab30d";
(function(){d=document;s=d.createElement("script");s.src="https://chatcdn.botsplash.com/x.js";s.async=true;d.getElementsByTagName("head")[0].appendChild(s);})();
Other Customizations:
In Settings --> Chat Widget, you can customize many aspects of your chat widget.
The yellow rectangle indicates where you can create different styles of chat widgets. This allows a different styled widget for different landing pages to ensure branding consistency.
General Settings:
General settings(red rectangle) will open the general options of customization for the chat widget, including the name, title, description, welcome message, etc. There are also ways to segment geographically and ban IP addresses.
Display Colors
In the display colors menu, you can change the look of your chat widget. The mockup on the left will change in real time as you adjust the colors so you can know exactly what your chat widget will look like on your page.
Behaviors
Behaviors area way to customize how your chat widget shows up on a website, including whether it only opens on a click, there is a delay in when it is visible, etc.
NOTE: Any changes to these settings will require a 5-10 minute wait before they show up live on your website.
