Gatsby Live Chat Integration

Add MyLiveChat to your Gatsby app

Gatsby is React underneath, so the React rule applies: a raw <script> tag written in JSX is not executed. Gatsby's own answer is the Script component exported from the gatsby package, which loads third-party code once and keeps it off the hydration path. The second Gatsby-specific trap is that its configuration files are only read when the dev server boots.

Use this guide to add MyLiveChat to Gatsby. The free plan includes one agent, unlimited chats, and unlimited websites — no credit card required.

If you do not have a MyLiveChat account yet, create a free MyLiveChat account.

Start free

Sign in to the MyLiveChat web console and click Deployment menu on the left. Choose Embedded Chat tab and copy the MyLiveChat code.

1. Open your shared layout component, usually src/components/layout.js.
2. Import the script component with import { Script } from "gatsby".
3. Render a <Script> element pointing its src at the MyLiveChat URL from Step 1, with strategy="idle" so it loads after hydration.
4. Stop and restart gatsby develop, then run gatsby build and gatsby serve before deploying.

If you would rather not touch your layout, add the tag in gatsby-ssr.js with setPostBodyComponents. Either way, remember that gatsby-ssr.js, gatsby-browser.js and gatsby-config.js are read only when the dev server starts — editing one while gatsby develop is running changes nothing, which reads exactly like a broken snippet. If a stale build is still being served, clear it with gatsby clean.

Do not assume the install worked because you saw no error. Open your site in a private browsing window and walk through this once:

1. Look for the chat launcher on the page. If it is missing, view the page source and search for mylivechat to confirm the code is really being served.
2. Start a chat as a visitor and send a test message.
3. Sign in to the web console and confirm the message arrives and that you can reply.
4. Close the chat and check the transcript is saved, so you know follow-up will work.

Check a real build, not just the dev server. A development server and a production build load third-party scripts differently, and a widget that appears while you are developing can still be absent from the deployed site.

• A raw script tag was written in JSX. React does not execute it. Use Gatsby's Script component, which exists for this.
• The dev server was not restarted after editing gatsby-ssr.js. Those files are read at bootstrap only, so the edit is real and invisible.
• A stale build was being served. Run gatsby clean to drop .cache and public, then build again.
• Only gatsby develop was checked. Development and production hydrate differently. Verify with gatsby build and gatsby serve.

After setup, sign in to the web console to answer visitors from your browser. You can also use the desktop app from the download page if your team prefers it.

Want the AI to answer first? Point the AI assistant at your site content and it handles routine questions 24/7, then hands off to a human with the full transcript when one is needed.

Gatsby is used for marketing sites, documentation and content-heavy stores where visitors arrive from search. Those visitors have a specific question and no account, and chat is the shortest path to an answer.

Loading through Gatsby's Script component with the idle strategy keeps the widget out of hydration, so the build-time performance work Gatsby does for you is not spent on a support tool.

Why does a script tag in my JSX do nothing?

Gatsby renders through React, and React does not execute script tags written in JSX. Use the Script component exported from the gatsby package.

Which loading strategy should I use?

Use strategy="idle". The widget loads once the browser is idle, so it does not compete with hydration.

I edited gatsby-ssr.js and nothing changed. Why?

Gatsby reads gatsby-ssr.js, gatsby-browser.js and gatsby-config.js only when the dev server starts. Stop and restart gatsby develop.

Do I need to clear the cache?

If an old build is still being served, run gatsby clean to remove the .cache and public folders, then build again.

Is it really free?

Yes. One agent, unlimited chats, and unlimited websites are free forever, with no credit card required.

Colours, position, language, the pre-chat form and your offline message are all set in your MyLiveChat dashboard rather than in your Gatsby code, so you can change them without editing your project again. See customization options for what can be changed, and visitor monitoring if you want to see which page a visitor is on before you reply.

New to live chat? Start with how to add live chat to your website and the live chat launch checklist, then live chat best practices once you are answering real conversations. Also useful: Loading your live chat script without slowing your page and Live chat on a single-page app. If you are worried about page speed, see does live chat slow down your website.

If anything is unclear, contact our support team from the chat button on this page or visit the Support page. We can help you choose the right setup path.