LyveCom Dashboard logo
LyveCom Dashboard logo
All articles

Embedding Shoppable Videos Into GatspyUpdated 2 months ago

Embedding Lyvecom in GatsbyJS

Platform: GatsbyJS

Intended Audience: Developers

GatsbyJS allows for the inclusion of custom JavaScript into your static site. However, there are a few best practices to keep in mind when embedding third-party scripts such as Lyvecom’s shoppable video carousel.

Important Gatsby Considerations

  • Gatsby uses a React component (html.js) to control the server-rendered HTML, including the <head>.

  • Gatsby recommends using APIs like onRenderBody or onPreRenderHTML instead of directly editing html.js to inject custom code.

  • For client-side dynamic updates to the <head>, use Gatsby’s Head API.

  • To add scripts, Gatsby also offers a Script API, which is preferred over using dangerouslySetInnerHTML.

If you choose to embed via dangerouslySetInnerHTML, here’s a basic implementation:

1jsxCopyEdit<div
2  dangerouslySetInnerHTML={{
3    __html: `
4      <script src="https://dashboard.lyvecom.com/widget/widget.js"></script>
5      <div class="lyvecom_carousel--component"></div>
6      <script>
7        LyveComWidget.mountCarouselComponent({
8            carouselID: '6463dbe1e1398dfb7f0d27b3',
9            parentElement: '.lyvecom_carousel--component',
10            carousel: true,
11            lng: 'en'
12        });
13      </script>
14    `,
15  }}
16/>
17

Notes:

  • Replace '6463dbe1e1398dfb7f0d27b3' with your own Lyvecom Carousel ID.

  • Be cautious when using dangerouslySetInnerHTML—only embed trusted content.

Instead of using html.js, use Gatsby’s onRenderBody API in your gatsby-ssr.js file to inject custom elements:

1jsCopyEditexports.onRenderBody = ({ setPostBodyComponents }) => {
2  setPostBodyComponents([
3    <script
4      key="lyvecom-widget"
5      src="https://dashboard.lyvecom.com/widget/widget.js"
6      async
7    />,
8    <script
9      key="lyvecom-init"
10      dangerouslySetInnerHTML={{
11        __html: `
12          document.addEventListener("DOMContentLoaded", function() {
13            LyveComWidget.mountCarouselComponent({
14              carouselID: '6463dbe1e1398dfb7f0d27b3',
15              parentElement: '.lyvecom_carousel--component',
16              carousel: true,
17              lng: 'en'
18            });
19          });
20        `,
21      }}
22    />,
23  ])
24}
25

Add the following div to your page component:

1jsxCopyEdit<div className="lyvecom_carousel--component"></div>
2

By following Gatsby’s preferred methods and integrating Lyvecom responsibly, you’ll ensure a seamless and performant experience for your site visitors.

Have more questions? Reach out to our support team - we’re happy to help!

Happy selling! ✨

Was this article helpful?
Yes
No