0

With React 16 and React-Router 4, I'm trying to using Botkit's embed code in a component, but it's just stuck in "Disconnected...reconnecting":

Code Sandbox is here

(I've removed the OnClick header and embedded_messenger divs as I want it to launch full-sized)

<div>
    <iframe
      title="botkit"
      id="botkit_client"
      src="//arrow-tarn.glitch.me/chat.html"
      style={{ height: "80vh", width: "100%" }}
    />

    <script src="//arrow-tarn.glitch.me/embed.js" />
    <link rel="stylesheet" href="//arrow-tarn.glitch.me/css/embed.css" />

    <script>var options = {}; Botkit.boot(options);</script>
</div>
);

When I run the app, I also get the following console error in Chrome:

GET http://arrow-tarn.glitch.me/%7B%7B%7Burl%7D%7D%7D 404 (Not Found)

Which of course translates unescaped to {{url}} not found.

I'm thinking it has to do with the initialization/options in React:

<script>var options = {}; Botkit.boot(options);</script>

Any clue what am I doing wrong?

Robbie
  • 447
  • 1
  • 6
  • 19

1 Answers1

0

The {{url}} problem is your browser parsing the template and rendering the (hidden) image tag. This isn't the issue causing it to fail.

Something about your iframe is causing the chat client to fail when connecting to the server... did you make any changes to the off the shelf code?

Ben Brown
  • 91
  • 3
  • I'm pretty sure it has to do with initialization in React--the boot part: `` When I remove the "/chat.html" from the iFrame, the frame-within-a-frame index page loads without a problem. – Robbie Jul 23 '18 at 23:30
  • @Robbie I know you probably already solved this by now, but I happened to run across this post. You have a self-closing script tag `` which is causing it to not work. Remove the` />` and do `` – Alex K May 10 '19 at 04:00