VRM Lookup Component

The VRM Lookup component can be added to any page using the following code snippet:

<vrm-lookup></vrm-lookup>

This widget can work either with or without a branch being selected, but in order for it to work without a branch then company level VRM credits must be available.

When initialised, the component will check to make sure there are credits available to make lookups.

Configuration options

The following configuration options are currently available for the VRM Lookup Component:

show-result
This determines whether or not the widget will show the VRM result. Can be true or false. Default value is set to true.

template
This is which version of the widget is used. Default value is set to 1.

services
This can be set to true or false. This only needs to be set if you want to add the service & tyre booking radio button images (see below).

tyres
As above, this can be set to true or false. These only need to be set if you want to add the service and tyre booking radio button images.

redirect-url
If you want to redirect the user to a different page on a successful VRM result, you can enter the url here. Please note, as this is a string it must be formatted correctly with both double and single quotes. e.g redirect-url=”‘/go-to-this-url'”.

redirect-state
If you want to redirect the user to a different state upon a successful result, then you can enter the state here.  Please note, as this is a string it must be formatted correctly with both double and single quotes. e.g redirect-url=”‘app.go.here'”. If there is both a redirect url and redirect state, the state will take priority.

button-text
You can change the button text using this binding. The default value is ‘Get prices’. Please note, as this is a string it must be formatted correctly with both double and single quotes. e.g button-text=”‘BOOK'”.

require-branch-guid
This is a boolean to determine whether or not the user needs to have a branch selected before submitting a VRM lookup. The default is false and this is mainly going to be useful when you want to use a branch select and vrm lookup component together as a CTA.

loading-panel
This is a boolean value that will detemine whether or not a loading panel will show over the component while its initialising and doing initial API calls. The default value is false.

min-height
Min-height is the minimum height of the component in px. Important to set a value here if you want the loading panels to look good. Default value is 0.

Example code

<vrm-lookup template="1" redirect-url="'/online-booking/#/select-services'" button-text="'Book today'" loading-panel="true" min-height="125" ></vrm-lookup>

Updated on February 8, 2018

Was this article helpful?

Related Articles