uBind

For information and detailed documentation, please visit the uBind Plugin Page

The uBind WordPress plugin is used to embed a uBind product form and/or portal 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.

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.

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

1. 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 the Save button. You can then use the custom shortcode to display the associated uBind form.

To create a portal embed configuration, tick on the Portal. Note that the configuration for 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.