Botkit chatbot not able to connect when embedded

Glitch Help
, ,
#1

Hi, I created a chatbot via botkit here: https://glitch.com/edit/#!/mr-pharmacist

The chatbot works fine on my computer if I run it from the command console. However, whenever I try embedding it on a website, it is stuck at “Disconnected… reconnecting!” which seems to be the default message if the chatbot is not connected to the server. Am new to coding and new to glitch, so I’m not sure what is the problem and how to rectify it. Anyone can help?

#2

Hi and welcome to the community!

Well done with your bot so far, I’ve not worked with botkit before but it looks like you’ve made a great start.

How are you “embedding” it in another website? Are you embedding the whole Glitch or doing it some other way?

#3

I’m using the Glitch embed code as follows:

<!-- Copy and Paste Me -->
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
  <iframe
    src="https://glitch.com/embed/#!/embed/mr-pharmacist?path=package.json&previewSize=100"
    title="mr-pharmacist on Glitch"
    allow="geolocation; microphone; camera; midi; vr; encrypted-media"
    style="height: 100%; width: 100%; border: 0;">
  </iframe>
</div>

When I embed it, it only connects if I click on the full screen button on the chatbot. If I leave it as it is like how it is shown in the figure below, then it refuses to connect. Any idea how I can overcome this?

#4

It seems that behavior is intentional. From line 463 - 465 in /public/client.js:

// this is embedded in an iframe.
// send a message to the master frame to tell it that the chat client is ready
// do NOT automatically connect... rather wait for the connect command.

I suppose you could change the code to always connect (that.connect(user)). However, as I have never used Botkit, I can not say if it will cause some problems later on.

Another way would be to send the connect command from the website you embed your app in. You can use the postMessage function to do that.
From the code it looks like the message sould be the object {name: 'connect'} with optional user data; e.g. {name: 'connect', user: userData}.

3 Likes