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
onRenderBodyoronPreRenderHTMLinstead of directly editinghtml.jsto 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.
Recommended Approach: onRenderBody
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?