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.
2 Replies
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