Typebot
Log in

Share feedback, ideas and get community help

Updated 3 months ago

Trying to embed Typebot react component in Appsmith.

jjwalsh-vori
·
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
B
j
4 comments
BBaptiste
Probably better if you import the JS lib without React
BBaptiste
Plain Text
<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>
`
BBaptiste
https://docs.typebot.io/deploy/web/libraries/html-javascript
jjwalsh-vori
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
Add a reply
Sign up and join the conversation on Discord
`","dateCreated":"2024-07-22T14:55:41.310Z","dateModified":"2024-07-22T14:55:41.310Z","author":{"@type":"Person","url":"https://community.typebot.io/members/589d2b28-a111-4f02-a228-ad757d0e0112","name":"Baptiste","identifier":"589d2b28-a111-4f02-a228-ad757d0e0112","image":"https://cdn.discordapp.com/avatars/621241109913403395/6fd7e5e4b8bca7e84d2c0bbdf9906a08.webp?size=256"},"commentCount":0,"comment":[],"position":2,"upvoteCount":0},{"@type":"Comment","text":"https://docs.typebot.io/deploy/web/libraries/html-javascript","dateCreated":"2024-07-22T14:55:43.316Z","dateModified":"2024-07-22T14:55:43.316Z","author":{"@type":"Person","url":"https://community.typebot.io/members/589d2b28-a111-4f02-a228-ad757d0e0112","name":"Baptiste","identifier":"589d2b28-a111-4f02-a228-ad757d0e0112","image":"https://cdn.discordapp.com/avatars/621241109913403395/6fd7e5e4b8bca7e84d2c0bbdf9906a08.webp?size=256"},"commentCount":0,"comment":[],"position":3,"upvoteCount":0},{"@type":"Comment","text":"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","dateCreated":"2024-07-22T15:09:17.951Z","dateModified":"2024-07-22T15:09:17.951Z","author":{"@type":"Person","url":"https://community.typebot.io/members/2bc0af1d-2482-4ff1-8121-ecd070aaf16a","name":"jwalsh-vori","identifier":"2bc0af1d-2482-4ff1-8121-ecd070aaf16a","image":"https://cdn.discordapp.com/embed/avatars/0.png"},"commentCount":0,"comment":[],"position":4,"upvoteCount":0}],"author":{"@type":"Person","url":"https://community.typebot.io/members/2bc0af1d-2482-4ff1-8121-ecd070aaf16a","name":"jwalsh-vori","identifier":"2bc0af1d-2482-4ff1-8121-ecd070aaf16a","image":"https://cdn.discordapp.com/embed/avatars/0.png"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]