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.
Widgets can be found by going to Settings > General > Global Setup > Website Widgets:


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 = https://www.nab.com.au/business/online-banking/nab-connect Westpac Payway (Requires Recurring Billing and Customer Vault module) = ...

    • Customer Payment via Credit Card

      Setup Email Templates Define wording and layout of automated emails regarding payments and topups by going to Reports->Report Templates->System Email Templates Customer Within the Finance Tab of customer card you can setup if the customer is to be ...

    • Dashboard

      Overview The dashboard is a customisable overview of your operations. The Dashboard consists of the following major components: Navigation Menu Links to the functions within the TransVirtual Web Portal. This menu remains at the top of every page to ...

    • Tracking Widget (Detailed)

      To insert the 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/track' type='text/javascript'></script> <div id='transvirtual-track' ...

    • Quote Widget

      To insert the 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 ...