Skip to main content

Wix

Embedding the Regular widget in Wix websites

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.

Host URL when using Wix.

Wix handles embedded widgets by embedding them in iframes under their own proprietary domain - filesusr.com. It's important when inputting the Host URL in the Quote Widget settings to combine it with the filesusr.com domain.

For example, if your website URL is www.example.com, you should input www-example-com.filesusr.com as the Host URL.

Embedding the widget​

  1. Follow the Wix guide for "Adding an embed" here to add a Embed HTML option element to your webpage.
  2. In the BuildPlateZ Widgets screen open the View modal of your widget by clicking on the widget name (with the eye icon next to it).
  3. On the Widget key row, choose a default language next to the Embed code label and click the copy icon next to it.
  4. Paste the Embed code into the code section of the Embed HTML option.
  5. 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: 'YOUR_WIDGET_KEY_HERE', lng: 'en' });
</script>
<div id="YOUR_WIDGET_KEY_HERE"></div>
  1. Click save and view the page.

The widget has built-in protection based on the current domain of the webpage. Wix's Administration panel uses a different domain (URL) as your website, the Quote Widget should load on the main page and will throw an error in the admin view.

  1. Click save and view the page
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.

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: 'YOUR_WIDGET_KEY_HERE', 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.