CODEWITHSUNDEEP
javascriptsingle-page-applicationchatbotibm-watsonwatson-assistant
Zhaniel Genev
Zhaniel Genev

Reputation: 21

How to expand Watson Assistant on Page Load

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>

Upvotes: 2

Views: 930

Answers (2)

Profiterole
Profiterole

Reputation: 187

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);
  });

Upvotes: 0

timd
timd

Reputation: 376

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>

Upvotes: 1

Related Questions