Typebot embed on GatsbyJS

AArcheus

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.

3 comments

AArcheus

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>
  );
};

BBaptiste

Thank you for the feedback!

BBaptiste

You could also use the @typebot.io/nextjs package then, it's the same idea

Add a reply

Share feedback, ideas and get community help

Typebot embed on GatsbyJS