Skip to main content

WordPress

Embedding the widget in WordPress using Elementor or the built-in editor

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.

Avoid embedding the widget into modals, drawers, etc.

Many WordPress Modal/Drawer plugins or elements include a tabindex="-1" attribute which can cause issues with the Regular Quote Widget. If you wish to embed the widget into a modal or drawer, make sure it functions correctly.

Embedding via Elementor​

If you wish to add the Quote Widget to a page using the Elementor page builder, follow these steps:

  1. Log into your WordPress Admin
  2. Navigate to the page you wish to add the Widget to or create a new one
  3. Toggle the Elementor Builder
  4. Look for the </> HTML block and add it to the page
  5. 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 HTML Code section of the block
  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. The Quote Widget should appear in the section.
  2. Preview the page to make sure the Widget is displayed and works as expected.
  3. Save your changes and publish the page.

Embedding via the build-in WordPress Editor​

If you wish to add the Quote Widget to a page using the built-in WordPress page builder, follow these steps:

  1. Log into your WordPress Admin
  2. Navigate to the page you wish to add the Widget to or create a new one
  3. Begin editing the page
  4. Add the Custom HTML block to the page content.
  5. 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 Custom HTML block.
  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. Toggle the Preview of the block.
  2. The Quote Widget should appear in the section.
  3. Preview the page to make sure the Widget is displayed and works as expected.
  4. Save your changes and publish the page.

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.

Depending on the WordPress theme and plugin set you are using, you should be able to add the script tag to the end of the page.

<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. Adding the <div> element can either be done with a custom HTML block or by adding an ID to an existing div element.

You can further improve the loading speed by including a preload tag in the head of your WordPress website. Once again, how this is done will depend on the Theme and plugins you are using, so refer to their documentations for details.

<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.