## 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 ``. - 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 ``, 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

6 7 LyveComWidget.mountCarouselComponent({ 8 carouselID: '6463dbe1e1398dfb7f0d27b3', 9 parentElement: '.lyvecom\_carousel--component', 10 carousel: true, 11 lng: 'en' 12 }); 13 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