Embedding Dexter chatbot - cross-origin object

🧩 Custom Components
1

I have a Dexter chatbot that I’d like to embed into a Streamlit page. I’m copying the embed code into a component like this:

import streamlit.components.v1 as components
components.html("""
  <script>var i=document.createElement('iframe');i.style.width=0;i.style.height=0;i.style.display='none';i.src='javascript:false',i.botId='109f9b8d-89a1-4cd2-a18d-0ae0cd7f6854',i.botTitle='New Bot 1',i.baseUrl='https://bots.rundexter.com';var d=document.getElementsByTagName('script');d=d[d.length-1],d.parentNode.insertBefore(i,d);var o=i.contentWindow.document;o.open()._l=function(){var e=this.createElement('script');e.src='https://rundexter.com/webwidget',this.body.appendChild(e)},o.write('<body onload="document._l();">'),o.close();</script>,
  """, width = 100, height = 100)

But the Streamlit page shows up blank, and the console indicates an

Uncaught DOMException: Permission denied to access property “document” on cross-origin object

Running Streamlit with --server.enableCORS=false --server.enableXsrfProtection=false doesn’t help.

Is there an easy fix? Based on Disqus integration - #10 by okld I’m guessing not, but I figured something might have changed since August :slight_smile:

Versions:
python 3.6.9
streamlit 0.71.0
macOS 10.15.7
Firefox 83.0 (similar error on Chrome)

2

Hello @sycamore,

So apparently, it is coming soon :upside_down_face:

So we will have to wait a little bit more :wink:

Cheers,
Fanilo

1 Like
3

Hey @sycamore

With Streamlit 0.73 the CORS block measure was lifted, could you try again?

I’m getting the following with your code now after clicking on tha chat icon (and puttin withd and height to 1000px):

image

Cheers,
Fanilo