How to expand Watson Assistant on Page Load

Question

I would like to ask if it is possible to expand a Watson Assistant Chatbot on page load ? Currently, when the page loads, a user will then have to click on the little icon below to start the chatbot.

Watson Assistant Chatbot Icon

I am using Chrome, and the solution should also be working on mobile platforms.

I have the following empty page with the chatbot script so far :

<body style="height: 100%;">
<script src=https://assistant-web.watsonplatform.net/loadWatsonAssistantChat.js></script>
<script>
  window.loadWatsonAssistantChat({
    integrationID: "some id", // The ID of this integration.
    region: "eu-gb" // The region your integration is hosted in.
  }).then(function(instance){
    instance.render();
  });
</script>
</body>
</html>

score 1 · Answer 1 · answered Jan 20 '20 at 09:41

Looking above I notice that you are using the new IBM Web Chat client, which is added to your html page. If you notice in the documentation for the web client - there is the section about extending the web chat and the extra documentation in GitHub.
In that documentation you will find a list of extra options that can be added to the creation of your instance of Web Chat. One of those options is to have the Web Chat open on loading the web page, rather than the icon. Or even adding the web chat to your own icon.
The option you are after is;
options.openChatByDefault - boolean - Optional - false - Whether to render the chat window initially in an open state. By default, the chat window is rendered in a closed state.
So your code should be;

<body style="height: 100%;">
<script src=https://assistant-web.watsonplatform.net/loadWatsonAssistantChat.js></script>
<script>
  window.loadWatsonAssistantChat({
    integrationID: "some id", // The ID of this integration.
    region: "eu-gb", // The region your integration is hosted in.
    options.openChatByDefault: true 
  }).then(function(instance){
    instance.render();
  });
</script>
</body>
</html>

Hi @timd, I want this to integrate into React application. I have created a function `loadwatson` but `options.openChatByDefault: true` gives a syntax error. Please help — Akshay, Jun 03 '21 at 10:29

Profiterole · Answer 2 · 2022-01-02T16:42:17.003

Acording to the API you need openChatByDefault: true within window.watsonAssistantChatOptions = {...}. Mind that my version of the API at the time of answering is different than that of the question, it goes with the following script for the embed.

  window.watsonAssistantChatOptions = {
    integrationID: "############", // The ID of this integration.
    region: "eu-gb", // The region your integration is hosted in.
    serviceInstanceID: "############", // The ID of your service instance.
    onLoad: function(instance) { instance.render(); },
    openChatByDefault: true
  };
  setTimeout(function(){
    const t=document.createElement('script');
    t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js"
    document.head.appendChild(t);
  });

How to expand Watson Assistant on Page Load

2 Answers2