Get a Free chat widget for your website!

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.

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.

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.

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.

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.

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.

 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.

 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.

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.

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.

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.