How to insert a Watson Assistant chatbot on your website without coding

Training a chatbot using IBM Watson Assistant is really quite simple. With little knowledge you can train a chatbot that interprets the natural language and answers according to its training.

But what happens when we have to bring the chatbot to our website? That is where the nightmare begins.

Advanced programming skills are required to make the API connection, know how to handle errors, and use appropriate methods.

At the same time, it is required to have capacities to develop a chat box, from its functionality to the UX, through the integration with the API and the installation in our web site.

With Blahbox it is possible to solve all these issues with just a few clicks.

Next, it is explained how to create the first chat box in Blahbox step by step:

First you must have an account at Blahbox.

1. Enter blahbox.net
2. Then click on the “Start for free” button

3. Sign up using your Google or Facebook user. You can also register with an email if you wish.

Create your first chat box

1. As soon as you enter Blahbox for the first time you have to click on the “New Chat” button.
2. Then select the option “For a website”.

3. Enter the name you want to put to your chat box and then “Continue”

4. At this point, it is recommended that you click on the button “Skip step, configure later”. Later on, it will be explained how to enter the credentials for the Watson Assistant.

There you go. At this point, your first chat box will be created. You can access it from the Blahbox dashboard.

Now let’s connect our chatbot to Blahbox. You fill find it totally explained step by step:

Basically what we have to do is look up the credentials of Watson Assistant and paste them into a Blahbox form.

1. Log into IBM Cloud. cloud.ibm.com

2. Go to the application that corresponds to Watson Assistant. This is usually under “Services” in the “Resource List”.

3. Expand “Service Credentials” in the menu on the left side.

3. Click on “View credentials” for the credential you want to use.

If you do not have any created credentials you can create a new one by following the instruction: Addition of credentials

4. Go to Blahbox, then go to the chat you want to configure for the Watson Assistant chatbox.

5. Go to the NLP option on the Main Menu.

6. Choose the “Watson Assistant” option if it still isn’t selected.

7. Choose the version 2 (V2) option of the Watson Assistant API.

8. Copy the “apikey” value you got in step 3 and paste it in the Blahbox “APIkey” field.

9. Copy the “url” value you got in step 3 and paste it in the Blahbox “URL” field.

10. Now you only need to obtain the Assistant ID before continuing (step 11).

11. In the menu on the left side at cloud.ibm.com choose “Manage” (for the Watson application that you entered in step 2).

12. Click on “Launch Watson Assistant”.

13. Click on “Assistants”.

14. Click on the three dots of the assistant you want to link with Blahbox.

15. Choose “Settings”.

16. In the menu on the left side click on “API Details”.

17. Copy the “Assistant ID” value and paste it in the “Assistant ID” field of the Blahbox page you got in step 10.

18. To finish click “Continue”.

Now you have your first chat box created in Blahbox and linked to your chatbot created in Watson Assistant!! Congratulations!!

Just configure the aesthetics of the chat box to get the desired look for your website.

When you enter the chat configuration section in Blahbox you will find many features to configure, fonts, text, avatar, colors, shapes, etc.

Here are some screens so you can see how easy it is to configure the aesthetics of the chat box.

Avatar Configuration. You can use a predefined image or upload yours

Borders

CallOuts Settings

Floating Icon Settings

We’re almost there!

Now you have to post the chat with the “Post” button.

And finally copy and paste into your site the code that Blahbox automatically generates to insert the chat box on your website.

The code can be found by clicking on the “Installation” option in the main menu. You must copy the code and paste it as it is between the <head> tags of each page of your site in which you want the chatbot to be present.

and that’s it!

In just a little while you have your Watson Assistant chatbot running on your website, with the shapes and colors you need!

Thanks! Matias Goncalves