Quotation Widget

Embed a part of QwykPortals in your website and let visitors start quotes straight from your homepage.

The QwykPortals Quotation Widget is an HTML element that can be embedded in any website to create a direct, convenient, link to your QwykPortal. When embedding the widget, the first page of the quotation process is displayed, fully functional. After the user fills out the details and clicks Continue your Quote, they will be redirected to your portal to continue the process.

This guide explains how to embed the widget in your website.

The quote widget embedded in a website

Getting the widget

The widget is hosted in our CDN and consists of a single javascript file.

https://assets.qwykportals.com/elements/latest/qwyk-quote-widget.js

Placing the widget on your website.

Place the following scripts at the bottom of your pages html file, just before the closing body tag.

index.html

<script type="text/javascript">
    window.QPW = {
        portal_address: 'https://my.digitalfreight.company',
        open_in_new_tab: true,
        theme: {
            primary: '009961',
            secondary: '009961',
            font_sans_serif: 'Open+Sans',
            font_size: '14px'
        }
    };
</script>
<script src="https://assets.qwykportals.com/elements/latest/qwyk-quote-widget.js" defer="true"></script>

Initialize the window.QPW object with appropriate values.

portal_address (string): the root address of the portal you wish to redirect users to. open_in_new_tab (boolean): whether the page should open in a new tab when users are redirected to your portal theme: theming values for the widget, primary and secondary are the colors without hex values. you must ensure the value in font_sans_serif is available on your website.

Place the following HTML element anywhere in your site you want the widget to appear:

<qp-quote-widget></qp-quote-widget>

You can control placement, styling and visibility by wrapping the qp-quote-widget tag appropriately. We recommend against applying styles or classes on the widget itself.

Styling is controlled by the same technology that allows custom styling of your portal, but should be fully isolated and not interfere with the rest of your website.

In case of any problems, please contact support for help.