Shopify Hydrogen embedding third party booking widget Bokun

Question

Hello,

The website I am working on uses Bokun for online booking / gift card purchases.
They supply a booking widget that is essentially a script tag that dynamically loads the booking / gift card buying interface. Nothing ground breaking there. The embedded code is set within page content and rendered as below...

<div dangerouslySetInnerHTML={{ __html: page.body }} className="" />

However I'm using Shopify Hydrogen (react / remix) (above code) to render the below code (page content).

<script type="text/javascript" src="https://widgets.bokun.io/assets/javascripts/apps/build/BokunWidgetsLoader.js?bookingChannelUUID=XXXXX" async></script>
     
<div class="bokunWidget" data-src="https://widgets.bokun.io/online-sales/XXXX/gift-card/XXXX"></div>

I believe I have sorted out the Security Policy errors e.g. *.bokun.io and *.polyfill.io

But now I'm now presented with (hopefully) one last error I can't seem to fix...

Warning: Prop `type` did not match. Server: "text/javascript" Client: "application/ld+json"

Any ideas / suggestions?

Thanks.

Answer 1

Okay I solved this with the help of other posts on SO...

// Optional: In Shopify, add meta data for a page signalling whether your page has the need to include a script from Bokun.  You could also use useLocation() to get the path if you like to hardcode.
const bokun = page.template_bokun?.value ?? "";

// When the remix page has "loaded", call a function
useEffect(() => {
    LoadBokunScript(bokun);
}, []);

// The load bokun script (further down the page somewhere)
function LoadBokunScript(bokun: string) {
    if (bokun == "true") {
    loadScript(
      "https://widgets.bokun.io/assets/javascripts/apps/build/BokunWidgetsLoader.js?bookingChannelUUID=xxxxxxxxxxxxxxx",
      () => {
        console.log("Booking interface loaded.");
      },
    );
  }
}

Remember that your page content will still need to include the following code...

<div class="bokunWidget" data-src="https://widgets.bokun.io/online-sales/XXXX/gift-card/XXXX"></div>

In my example, I created a custom route called /book/my-event-1, which serves a standard Shopify page only if there exists the bokun tag. That way I have two ways to load a Shopify Hydrogen page i.e. /pages/my-standard-page, /book/my-event-1. If the bokun meta is there for a standard page it will 404 so there is no duplication. There may be an issue to resolve with SEO later down the line so perhaps use this approach with caution.