Embedding Shoppable Videos Into Gatspy

Embedding LyveCom Carousels into GatsbyJS

Purpose:

This guide provides step-by-step instructions on how to embed LyveCom carousels into a GatsbyJS application.

Intended Audience:

Developers and Web Managers

GatsbyJS allows the insertion of custom JavaScript into your application. However, there are some considerations to keep in mind.

Gatsby uses a React component to server render the <head> and other parts of the HTML outside of the core Gatsby application. If you need to customize your site’s html.js, you can copy the default one into your source tree and then make modifications as needed.

To insert custom HTML into the <head> or <footer> of each page on your site, you can use html.js. However, Gatsby recommends using onRenderBody or onPreRenderHTML APIs instead of customizing html.js.

Anything rendered in the html.js component will not be made “live” in the client like other components. If you want to dynamically update your <head>, Gatsby recommends using Gatsby’s Head API.

For inserting custom JavaScript, you can add it to your HTML document by using React’s dangerouslySetInnerHTML attribute. However, Gatsby recommends that you use Gatsby’s Script API instead.

Here's how you could potentially add your script using the dangerouslySetInnerHTML attribute:

<div
  dangerouslySetInnerHTML={{
    __html: `
      <script src="https://staging.lyvecom.com/widget/widget.js"></script>
      <div class="lyvecom_carousel--component"></div>
      <script>
        LyveComWidget.mountCarouselComponent({
            carouselID: '6463dbe1e1398dfb7f0d27b3',
            parentElement: '.lyvecom_carousel--component',
            carousel: true,
            lng: 'se'
        });
      </script>
    `,
  }}
/>

Updated on: 02/06/2023

Was this article helpful?

Thank you!