T
Typebot•14mo ago
jwalsh

Trying to embed Typebot react component in Appsmith.

Hi, I'm trying to embed a chatbot in an Appsmith app as a custom component. This is the code I'm using:
import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm' import reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm' import typebotIojs from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/+esm' import typebotIoreact from 'https://cdn.jsdelivr.net/npm/@typebot.io/react@0.3/+esm' import { Standard } from 'https://cdn.jsdelivr.net/npm/@typebot.io/react@0.3/+esm'; function App() { const patiend_id = appsmith.model.data;
return ( <Standard typebot="service-bot" style={{ width: "100%", height: "600px" }} /> ); } appsmith.onReady(() => { reactDom.render(<App />, document.getElementById("root")); });
Appsmith is showing the following error: Uncaught TypeError: Cannot read properties of null (reading 'useRef') I suspect it's something to do with how I'm importing the Typebot deps via esm. Any suggestions on how to resolve this? I cannot install deps as NPM packages, I must use ESM to load them
3 Replies
Baptiste
Baptiste•14mo ago
Probably better if you import the JS lib without React 
<script type="module">
  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js'

  Typebot.initStandard({
    typebot: 'my-typebot',
  })
</script>

<typebot-standard style="width: 100%; height: 600px; "></typebot-standard>
<script type="module">
  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js'

  Typebot.initStandard({
    typebot: 'my-typebot',
  })
</script>

<typebot-standard style="width: 100%; height: 600px; "></typebot-standard>
`
Baptiste
Baptiste•14mo ago
jwalsh
jwalshOP•14mo ago
Tried that also, it appears that perhaps the issue is on the Appsmith side as it appears to sandbox custom components and it is causing an issue

Did you find this page helpful?