T
Typebot•10mo 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/[email protected]/+esm' import reactDom from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm' import typebotIojs from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/+esm' import typebotIoreact from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/+esm' import { Standard } from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/+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•10mo ago
Probably better if you import the JS lib without React 
<script type="module">
  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/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/[email protected]/dist/web.js'

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

<typebot-standard style="width: 100%; height: 600px; "></typebot-standard>
`
Baptiste
Baptiste•10mo ago
jwalsh
jwalshOP•10mo 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?