SEE DEMO

Overview

The uBind WordPress plugin is used to embed a uBind portal and/or product form to your WordPress page. The plugin itself does two main things:

In the HTML head, it adds the following script tag:

<script async=”true” src=”https://app.ubind.com.au/assets/ubind.js” type=”text/javascript”></script>

In the HTML body, it adds the following element in place of the WordPress shortcode:

For a uBind product

<div class=\”ubind-product\” data-tenant=\”tenant-alias\” data-product=\”product-alias\” data-organisation=\”organisation-alias\” data-environment=\”environment\”></div>

For a uBind portal

<div class=\”ubind-portal\” id=\”embedded-portal\” data-tenant=\”tenant-alias\” data-organisation=\”organisation-alias\” data-portal=\”portal-alias\” data-environment=\”environment\”></div>

Then, when the page loads, the uBind javascript will load, run, and find the div. It will then read the tenant alias, product alias and other configuration details then load the uBind form into that div.

Typically, the environment will be “production”, however possible other values are “staging” or “development”.

If you do not have your portal/product configuration details, you may wish to get in touch with uBind support.

Installation

  • 1. Download uBind WordPress plugin zip file from wordpress.org or obtain a copy of the plugin zip file from the uBind team, there is also a download link at the bottom of this page.
  • 2. Log in to your WordPress site's administration console.
  • 3. Install the plugin by uploading the zip file into the plugins section.
  • 4. Activate the Plugin.

Configuration

  • 1. (optional) If the WordPress setup uses dotEnv set the following parameters:
    • Define your Default uBind configuration with the following configuration fields:
    • UBIND_CONFIG_TYPE = <define for which configuration type, set to 0 for product and 1 for portal>
    • UBIND_PRODUCT = <product-alias>
    • UBIND_ENVIRONMENT = <environment>
    • If you have more than one uBind form to configure, you can setup the parameters as:
    • UBIND_CONFIG_TYPE_1 = <1st configuration type>
    • UBIND_PRODUCT_1 = <1st product-alias>
    • UBIND_ENVIRONMENT_1 = <1st environment>
    • UBIND_CONFIG_TYPE_2 = <2nd configuration type>
    • UBIND_PRODUCT_2 = <2nd product-alias>
    • UBIND_ENVIRONMENT_2 = <2nd environment>
    • Other fields you can include in the configuration, suffix an underscore and number if you have more than one uBind form to configure.
    • UBIND_TENANT = <tenant-alias>
    • UBIND_ORGANISATION = <organisation>
    • UBIND_FORM_TYPE = <possible values are quote or claim>
    • UBIND_SHORTCODE = <short-code>
    • UBIND_PORTAL_SHORTCODE = <portal-short-code>
    • UBIND_SIDEBAR_OFFSET = <possible values xs,50|sm,50|md,50|lg,50>
    • UBIND_PORTAL_FULLSCREEN = <set to 1 for portal to take over entire viewport or 0 otherwise>
    Always suffix an incremental number beside the dotEnv entry if there are more than one. The default uBind form values can either have a suffix of zero or no suffix.
ubind_product_1
  • 2. Go to the WordPress dashboard. At the left sidebar, click on the uBind Settings link. Select product or portal to configure. Complete the entries for each of the fields, select an environment and click on the save changes button. Associate the quote/claim and customer to an organisation by filling up the organisation field entry. Modify the sidebar offset by entering the viewport side followed by a comma then the offset size in pixels. You may place multiple sidebar offsets by separating them with pipes. e.g. xs,50|sm,50|md,50|lg,50
    You can add more uBind form configurations by using the Add New button at the bottom of the screen. Added form values will have checkboxes beside each field, you may check the boxes to load the values from the default form configuration.
    For the shortcode, check the box beside the shortcode entry and click save to generate a shortcode. The generated shortcode will be based on the first 4 letters each of the tenant ID, product ID and environment values. In cases of duplicate shortcodes, the generated shortcode will be suffixed with a numerical value. e.g. [tenant_prod_1].
    To create a custom shortcode, uncheck the box beside the shortcode entry, then click on the Save button. In case there is a duplicate, the admin UI will give an error notice when you try to save it. Replace the duplicate custom shortcode and click save to remove the duplicate error notice.
  • 2. Go to the WordPress dashboard. At the left sidebar, click on the uBind Settings link. Select product or portal to configure. Complete the entries for each of the fields, select an environment and click on the save changes button. Associate the quote/claim and customer to an organisation by filling up the organisation field entry. Modify the sidebar offset by entering the viewport side followed by a comma then the offset size in pixels. You may place multiple sidebar offsets by separating them with pipes. e.g. xs,50|sm,50|md,50|lg,50
    You can add more uBind form configurations by using the Add New button at the bottom of the screen. Added form values will have checkboxes beside each field, you may check the boxes to load the values from the default form configuration.
    For the shortcode, check the box beside the shortcode entry and click save to generate a shortcode. The generated shortcode will be based on the first 4 letters each of the tenant ID, product ID and environment values. In cases of duplicate shortcodes, the generated shortcode will be suffixed with a numerical value. e.g. [tenant_prod_1].
    To create a custom shortcode, uncheck the box beside the shortcode entry, then click on the Save button. In case there is a duplicate, the admin UI will give an error notice when you try to save it. Replace the duplicate custom shortcode and click save to remove the duplicate error notice.
ubind_product_1
ubind_product_2.2

uBind forms will be listed in the Admin UI. To edit or view a form configuration, click on the form title or hover and click on the Quick Edit link.

To delete a form configuration, mouse over the form title then click on the Delete link. You can also delete a form by using the Delete button at the bottom of each form section.

ubind_product_2.2

uBind forms will be listed in the Admin UI. To edit or view a form configuration, click on the form title or hover and click on the Quick Edit link.

To delete a form configuration, mouse over the form title then click on the Delete link. You can also delete a form by using the Delete button at the bottom of each form section.

ubind_product_3
  • 3. To display a uBind form on any page or post within your WordPress site, copy the associated shortcode from the Admin UI and paste it into your pages or posts content.
    You can also create your own custom shortcode from the admin interface by unchecking the box beside the shortcode to enable the text entry box. Enter the preferred shortcode then click on save button. You can then use the custom shortcode to display the associated uBind form.
  • 3. To display a uBind form on any page or post within your WordPress site, copy the associated shortcode from the Admin UI and paste it into your pages or posts content.
    You can also create your own custom shortcode from the admin interface by unchecking the box beside the shortcode to enable the text entry box. Enter the preferred shortcode then click on save button. You can then use the custom shortcode to display the associated uBind form.
ubind_product_3
ubind_portal_1

To create a portal embed configuration, tick on the portal. Note that the configuration for the Portal is different from that of a product.

Fill in the portal configuration details and click save when done.

Some pages do not work well with the portal, to work around this issue you can allow the uBind plugin to take over the entire viewport of the page. To do this, tick on Yes for the Full-Screen Mode option.

ubind_portal_1

To create a portal embed configuration, tick on the Portal. Note that the configuration for the Portal is different from that of a product.

Fill in the portal configuration details and click save then done.

Some pages do not work well with the portal, to work around this issue you can allow the uBind plugin to take over the entire viewport of the page. To do this, tick on Yes for the Full-Screen Mode option.

Changelog

  • 1.7.1
  • Added option for a portal to embed a CSS that will make use of the entire viewport.
  • 1.7
  • Plugin updates to support new features from uBind Form release 9.0.
  • 1.6
  • Update CSS version causing a PHP warning.
  • 1.5
  • Update uBind embed markup to display a preloader while the ubind.js script is being loaded.
  • 1.4
  • The reference URL to ubind.js changed from https://app.ubind.io/assets/ubind.js to https://app.ubind.com.au/assets/ubind.js.
  • 1.3
  • Updated the element inserted in the HTML body to use property data-tenant.
  • 1.2
  • Added support for multiple uBind form configurations.
  • Merge .env configurations with none .env configurations.
  • Added support for a default configuration that can be used by other form configurations.
  • 1.1
  • Added support for .env file configuration.
Download

Discover how uBind can help your company maximise insurance distribution

Request a free consultation and a member of our team will guide you through the key features and capabilities of the platform.

    A member of our team will contact you within one business day

      Call us now on 1300 824 631

    uBind is the future of insurance technology. Transform your business, automate and maximise insurance distribution with uBind.

    Convert website visitors into customers by adding an intuitive quote and bind solution to any website, or manage and sell insurance via the portal.

    Learn More About uBind
    uBind Solutions                 
    Contact us Now                 
    2022 Technical Innovation Pty Ltd. All rights reserved

    Privacy Policy | Terms of Use | Disclaimer