A comprehensive website chat widget!
Enable live chat and support with your visitors through different applications. The widget is compatible with multiple content management systems such as : WordPress, Webflow, Shopify, and Prestashop.
The get.chat widget is more than just a “WhatsApp chat widget” or a “Messenger widget”, it enables clients to reach out to you through different applications, including:
- Facebook Messenger
- Viber
- Line
- Telegram
- SMS
Create your website Chat Widget in 3 simple steps:
[threesixty]
Guide and FAQ
How to hide the chat widget on a landing page
Add this CSS code to the specific page where you want to widget to be hidden: ._360_widget_div { display: none; }
Alternatively, you can change the CSS ID of the widget by editing the “_360_randomID” variable in the Javascript code before </body> tag (The one that you’ve received via email).
Change the _360_randomID variable within the _360_options object to a string (eg. _360_randomID: _360_widget_id to _360_randomID: “getChatWidget”). The text in bold below is an example of what you’d implement for your widget.
<!– conversational widget –>
<script type=”text/javascript”>
(
function ()
{
_360_widget_id = `${Math.random().toString(36).slice(2)}`;
var _360_options = {
_360_whatsapp : “111111”,
_360_order : “whatsapp”,
_360_company_logo : “Boabab Web Services”,
_360_greeting : “yes”,
_360_btn_size : “normal”,
_360_display_btn : “everywhere”,
_360_chat_bubble : “1”,
_360_randomID: “getChatWidget”};
var _360_proto = document.location.protocol, _360_host = “360js.bwsonline.co.za“, _360_url = _360_proto + “//” + _360_host;
var _360_s = document.createElement(‘script’); _360_s.type = ‘text/javascript’;
_360_s.async = true;
_360_s.src = _360_url + ‘/360.js’;
_360_s.onload = function () { _360Widget.init(_360_host, _360_proto, _360_options); };
var _360_x = document.getElementsByTagName(‘script’)[0]; _360_x.parentNode.insertBefore(_360_s, _360_x);
}
)();
</script>
<!– /conversational widget –>
When targeting the implemented widget with custom CSS, one thing to be aware of is that the library adds ‘_360_’ to the beginning of the id, and ‘_modal’ to the end.
Target the element id in the CSS and give it the property display: none, here is where you would need to keep the added prefix and suffix on the id, for example: #_360_getChatWidget_modal { display: none; }
This should hide the chat widget on any page where the CSS code is present.
How to add the Chat widget to my Website
After creating your Chat widget input your email in the corresponding field under step 3 and click on “Get Code”. After you receive the code, copy and paste it before the </body> tag on every page of your website.
How to add the Chat Widget on a WordPress website
Through a plugin:
Install the plugin “Head, Footer and Post Injections” and activate it. Go to settings > Header and Footer> Paster your code under the section titled “BEFORE THE </BODY> CLOSING TAG (FOOTER)”
Without a Plugin
Got to appearance> Theme file editor> Look for footer.php in the theme files >Paste your code right before the closing </body> tag.
How to add the Chat Widget on a Shopify store
In your dashboard, go to Online store>Themes > Current theme > Click on the “Actions” drop down menu> Click “Edit Code” > Find the </body> tag and add the code right before it.
How to add the Chat Widget to Webflow
To add the chat widget to a site created with Webflow, open your site in the designer > Open page settings and add your code before the </body> tag under custom code.
Changing the order of the messaging apps
If you have configured your Website chat widget to display multiple apps (i.e. WhatsApp, Messenger, and Telegram), you can change the order of the displayed apps by simply holding on the section of a specific app in step 1 and dragging and dropping up or down to reorder it.
How to Add WhatsApp to the Chat Widget
In Step 1 click on the WhatsApp Icon if not highlighted by default. Then in the first field type in the WhatsApp number you use for your Business. The Prefilled message is the text that is displayed on the WhatsApp website under the “Continue to Chat” button. If you want to display a popup message next to the WhatsApp Icon you can add it in the Greeting message section under step 2. You can also display your logo next to the greeting message by adding a link to the PNG image.
How to Add Facebook to the chat Widget
In Step 1 click on the Facebook Messenger to add it. Then all you have to do is to add your Facebook page ID which can be found by going to your Facebook page> Clicking more in the menu below your Page name> About > Under More info, navigate to Page ID.
If you want to display a popup message next to the Facebook messenger Icon you can add it in the Greeting message section under step 2. You can also display your logo next to the greeting message by adding a link to the PNG image.
How to Add Instagram
To add Instagram to the Chat Widget, click on the Instagram icon in step 1 to add it. Then all you have to do is add your Instagram username
If you want to display a popup message next to the Instagram Icon you can add it in the Greeting message section under step 2. You can also display your logo next to the greeting message by adding a link to the PNG image.
How to Add Telegram
To add Telegram to the Chat Widget, click on the Telegram icon in step 1 to add it. Then all you have to do is add your Telegram username without the “@”. You can get your Telegram username by going to the application> Settings> Username.
If you want to add a popup message next to the Telegram Icon you can add it in the Greeting message section under step 2. You can also display your logo next to the greeting message by adding a link to the PNG image.
How to Add Viber or SMS to the Chat Widget
In Step 1 click on the corresponding Icon for SMS or Viber then add your business number. If you want to display a popup message next to the WhatsApp Icon you can add it in the Greeting message section under step 2. You can also display your logo next to the greeting message by adding a link to the PNG image.