Skip to main content

General

Embedding the Regular widget in any website or platform

Introduction​

The Regular Quote Widget is an embeddable <script> and can be easily integrated into various website builders, as well as custom coded websites.

What is important is properly setting up the Host URL in the Quote Widget settings. This URL is important, because it serves as a security measure, preventing 3rd parties from copying your Quote Widget.

If you wish to add the Quote Widget to a WordPress website, follow these instructions.

If you have a Shopify store, follow these instructions.

Avoid embedding the widget into modals, drawers, etc.

If you plan on embedding the Regular Quote Widget into a modal or drawer element, make sure there is no tabindex="-1" attribute added to said modal/drawer, which can cause issues with the Regular Quote Widget. Functionality may vary depending on the plugin/module/library/custom code you are using so make sure to test the Regular Quote Widget fully once you embed it.

Embedding the widget using a WYSIWYG editor​

  1. Begin editing the page you wish to add the Widget to
  2. Toggle the HTML mode of the Editor. The icon indicating this mode is typically </>
  3. Copy the Embed code with your preferred language from the BuildPlateZ platform. The code should look something like this:
<script>
    (function (w, d, s, o, f, js, fjs) {
        w['bpz-regular-widget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
        js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
        js.id = o; js.src = f; js.async = 1; js.type = 'module'; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'bpzRegularWidget', 'https://quote-regular.buildplatez.com/assets/index.js'));
    bpzRegularWidget('init', { widgetKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', lng: 'en' });
</script>
  1. Paste the Embed code into the editor.
  2. Add a <div> element with the id equal to your widget key where you want the Widget to appear. For example:
<div id="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></div>
  1. Switch back to the Preview mode of your editor.

If your Website Administration panel is on the same domain (URL) as your website, the Quote Widget should load.

If your admin panel is on a different domain, you should see a gray rectangle appear in the Editor with the following message 'quote.buildplatez.com refused to connect.'.

  1. Save your progress and view the page

Embedding the widget directly into your HTML code​

  1. Open the file or template where you wish to place the Widget
  2. Copy the and paste the Embed code with your preferred language from the BuildPlateZ platform. The code should look something like this:
<script>
    (function (w, d, s, o, f, js, fjs) {
        w['bpz-regular-widget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
        js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
        js.id = o; js.src = f; js.async = 1; js.type = 'module'; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'bpzRegularWidget', 'https://quote-regular.buildplatez.com/assets/index.js'));
    bpzRegularWidget('init', { widgetKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', lng: 'en' });
</script>
  1. Add a <div> element with the id equal to your widget key where you want the Widget to appear. For example:
<div id="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></div>
  1. Save the file.

Depending on the platform/website you are using, you may have to re-upload the file or follow deployment procedures.

Improving performance​

The script tag of the widget is loaded asynchronously, which means it won't block the rendering of the page. However, it's recommended to add the script tag at the end of the body tag to ensure the page is rendered before the widget is loaded. This will improve the performance of your website.

<body>
    <!-- Your website content -->
    <script>
        (function (w, d, s, o, f, js, fjs) {
            w['bpz-regular-widget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
            js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
            js.id = o; js.src = f; js.async = 1; js.type = 'module'; fjs.parentNode.insertBefore(js, fjs);
        }(window, document, 'script', 'bpzRegularWidget', 'https://quote-regular.buildplatez.com/assets/index.js'));
        bpzRegularWidget('init', { widgetKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', lng: 'en' });
    </script>
</body

You can still place the <div> element wherever you want the widget to appear. The widget will be rendered in the place where the <div> element is located.

You can further improve the loading speed by including a preload tag in the head of your HTML document.

<head>
    <!-- Your website content -->
    <link rel="preload" href="https://quote-regular.buildplatez.com/assets/index.js" as="script">
</head>

This will preload the widget script and improve the loading speed of the widget.