Integrating Widgets into your own website

Integrating Widgets into your own website

Integrating Widgets

TransVirtual continue to develop widgets that can be integrated into your own website for easier access to our systems. Functionality includes log in, quick tracking of consignments, and paying invoices online can be achieved by using these widgets.
To see the Widgets page go to Configuration > General > Global Setup, click on Website Widgets tab as shown below.

Grab the code from the widgets here; simply click each widget and the code will appear bottom-right of the page.

What widgets are available?

Currently, widgets exist for the following activities:
  1. Logging into TransVirtual
  2. Creating customer accounts
  3. Tracking consignments
  4. Obtaining a price estimate for a delivery
  5. Paying an invoice

How do I add widgets to my website?

The widgets are referenced through html, which can be added into your site code accordingly. You only need to add two lines - a <script> tag and a <div> tag.
Be aware that WordPress does not recognize one of the attributes in the <div> tag and will strip it out when you compile the page. If you are using WordPress, a workaround exists to fix this. Please see below.

What do the widgets look like?

Our widgets all have a similar look thanks to a simple CSS styling applied to them. As an example, the login widget looks as follows:

                                                                                     

What do the widgets actually do?

Login widget

This widget passes the username and password securely through to TransVirtual, and will log the user into the homepage of TransVirtual.

Customer Account Creation widget

This widget takes user information and creates a customer login account attached to the main client account. The username will be "Online - " followed by the Company Name (if supplied) or the Name (if no Company Name supplied). Once the account is created, it will automatically log in. It will fail if:
  1. The email address is already in use.
  2. The username it would create already exists.

Consignment Tracking

There are two versions of this widget, a simple and a detailed tracking version. In both cases the widget takes the consignment number and searches the TransVirtual system without the requirement to explicitly log in.
The detailed version returns the following information:
  1. Consignment Status
  2. Consignment Number
  3. Sender
  4. Receiver
  5. Address
  6. Delivery Instructions
  7. Quantity
  8. Total Weight
  9. Scan History
The simple version returns the following information:
  1. Consignment Status
  2. Suburb
  3. Quantity and Weight
  4. Status History

Price Estimation

This widget takes the Sending and Receiving suburb plus the details of the items for delivery and returns a quote based on the information provided.

Invoice Payment

This widget takes the Invoice number and processes a payment accordingly. It can be configured to pre-populate the invoice number for ease of client use.

By default, Wordpress will strip out the rel='10000' from the Div tag. To Correct, edit functions.php file with the following addition:

<?php

function uncoverwp_tiny_mce_fix( $init )

{

    $init['extended_valid_elements'] = 'div[*]';

    return $init;

}

add_filter( 'tiny_mce_before_init', 'uncoverwp_tiny_mce_fix' );



    • Related Articles

    • Merchant Setup

      Register for API payments with the below Secure Pay (Auspost) = https://www.securepay.com.au/ NAB Transact = https://www.nab.com.au/business/payments-and-merchants/ecommerce-and-online-payments XML API Westpac Payway (Requires Recurring Billing and ...

    • Customer Payment via Credit Card

      Email Templates To set the text and design of automated emails related to payments and top-ups, navigate to Reports > PDF/Excel Report Templates > System Email Template. Customer In the Finance Tab of the customer card, you can setup if the customer ...

    • Account Setup

      Get ready for your onboarding/implementation project 1. Standing Data Get your key data ready. The import files attached below are a guide to the type of fields available for import. You do not need to use these templates, although the data you're ...

    • Quote Widget

      Quote Widget To insert the quote widget into your website, you need to include the following two lines of code to your page. <script src='https://portal.transvirtual.co/Resource/WidgetScript/quoteWizard' type='text/javascript'></script> <div ...

    • Login Widget

      Login Widget To insert the login widget into your website, you need to include the following two lines of code to your page. <script src='https://portal.transvirtual.co/Resource/WidgetScript/login' type='text/javascript'></script> <div ...