Website

1. Introduction 

According to Oracle, 50% of customers want a business or service provider to stay accessible 24/7. Placing a chatbot on your website improves user experience by providing all-time support information.

MyBOT has made it extremely easy for you to deploy a chatbot on the website. 

1.1 Availability 

  1. Access Deploy workflow from the Navigation
  2. Then look for the “Website Chatbot” section

2. Deploy

There are two key ways of deploying or using a website chatbot as described below – 

2.1 Chatbot Widget on a Webpage 

In this mode, you include a simple javascript within your Webpage HTML. You can copy the script to be included from the Setup Tab within the Website Chatbot section. See below for reference:


Once you have copied the script, modify the HTML of the webpage where you want to include the chatbot. See below for reference: 

Go to your website HTML code and paste the script that you have copied.

Once deployed the chatbot widget works within the webpage where it has been deployed.

2.2 Steps to deploy the chatbot on a website made via WordPress

1. Log into your WordPress account, open the “Website creation” section.
2. Click On Plugin present on the left-hand side.
3. Search for  “Header and Footer Scripts” and Install it.
4. Copy the Script of your bot from your MyBOT account, the script will be available in the Deploy -> Website section.
5. Add the Header and footer to your plugin, paste this script into the header section and save the file.

Note: Your WordPress account must be on a Business plan for this feature.

2.3 Steps to deploy a chatbot on Magento 2 website 

For adding custom scripts –https://magefan.com/blog/how-to-add-custom-code-in-html-head

  1. Navigate to Admin Panel > Content > Configuration.
  2. Choose the store view you want the head tag to be changed on or select Global in order to change it on every store view.
  3. Find the HTML Head section and add your code in the Scripts and Style Sheets field.
  4. Save on Click configurations.

2.4 Steps to deploy the chatbot on a website made via Wix

Please follow the below steps to add the MyBOT script

  1. Log in to your Wix account
  2. Select Edit Site
  3. Click on Add Apps
  4. Search for HTML and choose « HTML iFrame/Embed » from the Wix App market
  5. Add it in your site
  6. A window pops up. Double click on the window or select the Enter Code option.
  7. Select the Code option  
  8. Copy the script from MyBOT deploy section and paste the script here.

2. 5 Deploying chatbot on a website made via Cargo.sites

  1. Each Cargo site contains a Custom HTML Editor where you can add HTML and JavaScript. Access is via the Design tab.
  2. Copy and paste the Bot script with <script> and </script> at the beginning and end of the website.

Note: The script will be applied to all the pages of your website.

If you want the bot script to work only on particular pages then you can add HTML for a specific page only, open the Code View window via the Formatting Toolbar of that page.

2.6  Deploying chatbot on Shopify

1. Go to your Shopify admin site
2. Here you have to click on “Customize theme”
3. Click on “Customize”
4. Upon opening the “Themes” section, you will be able to see the “Customize” button at the right side of the screen, click on it.
5. Click on Edit code.
6. Click on the “{/} theme. liquid”
7. Here you have to go to the “Layout” folder and click on it to display a .liquid files list, now click on “{/} theme.liquid”, this will automatically generate a code file on the right side of the screen.
8. Find  </body> section
9. Here you can add your Javascript code, just above the “</body>” section, In this example, I added the following in order to show you how it works.
10. Refresh the screen and your chatbot should reflect on your website.

For more help, you can visit this document and view the tutorial video.

2.7 Standalone Chat Widget

You could decide to opt for invoking the Chat Widget using a direct URL. This will typically be expected to open in a different tab and is particularly handy for Mobile Use Cases. 

The direct URL for your Chatbot is also available in the Setup Tab within the Website Chatbot Section.

See the example below of how the website chatbot widget when invoked using the direct URL appears on a laptop.

3. Launch Configurations

Below is the list of configurations supported while launching the website chatbot

3.1 Launch with a Delay 

You can add the below line in the script and it will help you launch your bot on your website with a delay you configure here.

setTimeout(function(){ chatWidget.launchBot(); }, 3 * 1000);

(Note: This will add a 3 seconds delay before launching the widget.)

3.2 Trigger a Path while launching Chatbot

Typically, the launch flow on the MyBOT Chatbot begins with the Welcome New User or Greet Returning User path. But if you would want the bot to start with a particular path, you can follow the below steps: 

  1. Chatbot Widget invoked using Script

launch_flow: “PATH_KEY”

See below for an example to add launch_flow to the script.  

{bot_key:“DDDxxxKEY”,bot_name:“SampleBot”,launch_flow:“D8E2CC7E37F04FEB802F45E8F49E4598”, branding_key:“default”}
  1. Website Chatbot using Direct URL

And below on adding it to the direct URL: 

launch_flow=PATH_KEY

To get the path key, Go to Build > Paths and to the specific path that you want to trigger. 

Once there click on ‘Edit Path’ from the floating menu and copy the path key from the modal box that shows up.

3.3 Set Attribute

Not every piece of information can be precoded in a bot some data are dynamic and are needed to be passed from the website you are deploying your bot on. Like with configuring the path that you want to start from, you can set attributes both while launching the chatbot widget within your webpage or as a direct URL. 

  1. Chatbot Widget invoked using Script

You can set attributes from the script itself and configure its value as static data or dynamic (using a javascript variable in place of the value). 

Note: This attribute can be a new attribute or an existing attribute on the bot.

While invoking the Chatbot widget using the Javascript on the webpage, use the format below. 

“user_attributes” : [{“name”:“user_id”,“value”:“340490123”}, {“name”: “user_email”, “value”: “[email protected]”}]
  1. Website Chatbot using Direct URL

In the bot direct URL, some optional parameters can be appended while launching the bot.

Bot Direct URL

https://mybot.cbots.live/static/standalone/bot.html?bot_key=<Bot Key>

Parameters that you can pass

&launch_flow=<Launch_Flow>&data_attrs={key1=val1::key2=val2}

“launch_flow” will help start the bot on a particular flow. “data_attrs” can be used to pass some data attributes while launching the bot.

Example after appending how the Direct URL will look like

https://mybot.cbots.live/static/standalone/bot.html?bot_key=DDDxxxKEY&launch_flow=D8E2CC7E37F04FEB802F45E8F49E4598&data_attrs={name=Jhon::surname=doe}

Was this article helpful?

Related Articles

Leave A Comment?