Share feedback, ideas and get community help

Updated 3 months ago

Typebot embed on GatsbyJS

Hey everyone,

I'm reaching out for some guidance on integrating the Typebot into our Gatsby website.

We've been following the embed instructions tailored for React - standard (embed in a container on a site).

import { Standard } from "@typebot.io/react"; const App = () => { return ( <Standard typebot="XYZ" style={{ width: "100%", height: "600px" }} /> ); };

Everything seems to work perfectly when running on a local server.

However, the moment we try to deploy our site on Netlify, we encounter an error:
https://i.gyazo.com/2afe4ca0a0ffd90a5bae3ed088f0139d.png

Does anyone have any insights on how to tackle this issue?

I'd really appreciate any suggestions or advice you all might have.

This is a huge blocker for me right now.
A
B
3 comments
Fixed this with the GPT-4 assistance.

I have no idea if this is the best approach, but it's working.

If any of you have more robust implementation for Gatsby, please let me know!

import React, { useState, useEffect, Suspense } from 'react'; // Lazy load the Standard component const StandardLazy = React.lazy(() => import('@typebot.io/react').then(module => ({ default: module.Standard }))); export const Typebot = ({ blok: { id, width = '100%', height = '600px' } }) => { const [isClient, setIsClient] = useState(false); useEffect(() => { // This effect will only run once, when the component mounts, setting isClient to true setIsClient(true); }, []); return ( <div style={{ width, height }}> {isClient && ( <Suspense fallback={<div>Loading...</div>}> <StandardLazy typebot={id} style={{ width, height }} /> </Suspense> )} </div> ); };
Thank you for the feedback!
You could also use the @typebot.io/nextjs package then, it's the same idea
Add a reply
Sign up and join the conversation on Discord