QR Code Custom Tool

In this example, we will create a custom tool for QR code. This tool will help us create qr code in emails and web pages.

This example is built using vanilla JavaScript and lodash. Lodash is available in Unlayer's environment by default. Check our documentation for more details.

In this example we are using a third party library called qrious to generate QR Code. If you want to use some other QR code generator then you can use that library and update tool accordingly.

Register Tool

We will create a qrTool.js file for the custom tool, which will be passed to unlayer.init.

qrTool.js

Our tool is a simple qr generator which uses third party library to generat qr code. Tool has a simple template when user will drop tool in editor it will show text placeholder when user will enter url tool will generate QR code dynamically for that url.

Now let's register our tool. Notice that this tool is using a custom property editor called qr_generator which we will build below.

unlayer.registerTool({
  name: 'qr_tool',
  label: 'QR Code',
  icon: 'fa-qrcode',
  supportedDisplayModes: ['web'],
  options: {
    qr: {
      title: 'QR Content',
      position: 1,
      options: {
        qr: {
          label: 'QR URL',
          defaultValue: '',
          widget: 'qr_generator', // Custom Property Editor
        },
        alignment: {
          label: 'Alignment',
          defaultValue: 'center',
          widget: 'alignment',
        },
      },
    },
  },
  values: {},
  renderer: {
    Viewer: unlayer.createViewer({
      render(values) {
        return `<div class="qr-tool" style="margin: auto; text-align: ${
          values.alignment
        }">
          ${
            values?.qr?.qrCode
              ? `<img src="${values.qr.qrCode}" style="width: ${values.qr.width}%;"/>`
              : `<h3>Enter url and QR Code will be generated here</h3>`
          }
        </div>`;
      },
    }),
    exporters: {
      web: function (values) {
        return `<div class="qr-tool" style="margin: auto; text-align: ${
          values.alignment
        }">
        ${
          values?.qr?.qrCode
            ? `<img src="${values.qr.qrCode}" style="width: ${values.qr.width}%;"/>`
            : `<h3>Enter url and QR Code will be generated here</h3>`
        }
      </div>`;
      },
      email: function (values) {
        return `<div class="qr-tool" style="margin: auto; text-align: ${
          values.alignment
        }">
        ${
          values?.qr?.qrCode
            ? `<img src="${values.qr.qrCode}" style="width: ${values.qr.width}%;"/>`
            : `<h3>Enter url and QR Code will be generated here</h3>`
        }
      </div>`;
      },
    },
    head: {
      css: function (values) {},
      js: function (values) {},
    },
  },
});

Then, we'll pass the qrTool.js URL to the editor in init option customJS.

The URL must be absolute
You can load multiple URLs by passing more in the array
If you don't have the option to pass a URL, you can directly pass your JavaScript code as a string

Here we are also passing js file of thord party library which we want to be loaded before our custom tool loads.

unlayer.init({
  id: 'editor-container',
  displayMode: 'email',
  customJS: [
    'https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js',
    'https://examples.unlayer.com/examples/qr-custom-tool/qrTool.js',
  ],
});

QR Generator

Now we need to register our qr code generator custom editor property which the user will use to generator, QR code dynamically.

Now we'll register our qr_generator property editor that will render the property editor template.

In the render function, we will render the HTML template. And in the mount function, we will attach events to input fields to detect url value changes and create qr code dynamically for entered value. Learn More

unlayer.registerPropertyEditor({
  name: 'qr_generator',
  layout: 'bottom',
  Widget: unlayer.createWidget({
    render(value, updateValue, data) {
      console.log(value);
      return `
        <label>Enter URL</label><br />
        <input id="qr-url" class="form-control" type="text" placeholder="Enter URL here..." value="${
          value.srcUrl || ''
        }" />
        <br />
        ${
          value.qrCode
            ? `<label>Width</label> <br /> <input id="qr-width" class="form-control" type="number" min="1" max="100" value="${50}"/>`
            : ``
        }
      `;
    },
    mount(node, value, updateValue, data) {
      var url = node.querySelector('#qr-url');
      var width = node.querySelector('#qr-width');
      url.onchange = function (e) {
        // Get index of item being updated
        var val = e.target.value;
        var qr = new QRious({
          value: val,
        });
        dataUrl = qr.toDataURL('image/jpeg');
        updateValue({ ...value, qrCode: dataUrl, srcUrl: val });
      };
      if (!width) return;
      width.onchange = function (e) {
        // Get index of item being updated
        var val = e.target.value;
        updateValue({ ...value, width: val });
      };
    },
  }),
});

More Styling Options

Once your qr tool is working, you will need to add more styling options to update padding etc. You can use our built-in property editors to easily add more options for the user to customize the menu.

Live Preview

Here's a live demo preview of our QR custom tool. Drag and drop the custom tool QR Code and add a URL.

Email Editor

Page Builder

Images & Media

Advanced