Website WIdgets
Forever Change How You Inspect and Appraise Used Vehicles
Overview
With PAVE's easy to use JavaScript, you can replace your long "online appraisal" or "sell your car" forms on your website by only requiring visitors to enter their name and phone number to get a PAVE link sent to them directly. PAVE will automatically gather the rest of the needed information from the photos as they capture them.
Website Installations
When they submit their phone number to get sent a PAVE link, their session and progress will automatically show on your dashboard as being sent from your webpage under the name you gave your widget for easy tracking. Once they are complete in doing their capture, the people you have set up to get notified will receive a link by text with the results.
For embedding on your website, you have two options;
1 - iframe: This option allows you to embed the PAVE Inspect form as a frame or an external resource.
2 - floating form: This option allows you to add the PAVE Inspect form to hover on the bottom center of any page where the script gets added.
Iframe: (optional)
Your website layout and the theme used will affect how your form appears on your web page. We calculate the height and the width of your form based on the container size where you embed the form.
To embed the PAVE Inspect form, first create the container on your webpage where you want it to be placed. Once created, replace the 'YOUR_CONTAINER_ID' in the script that is displayed for that widget with the name you gave this container.
**SAMPLE ONLY**
<script src="https://uat.paveinspect.com/js/launch-widget.js"></script>
<script>
initPAVELauncher({
'container': 'YOUR_CONTAINER_ID'
'src': 'https://uat.paveinspect.com/launch-widget/43b4a899-6bf1-48b8-ae72-451d08aac5e9'
});
</script>
**SAMPLE ONLY** the script for your website is created in SETTINGS when you activate a new form.Copy the script for your form and add it within the <body> of your page. The form will automatically load inside the defined container.
Floating form: (default)
If you choose not to enter a designated container for where the PAVE Inspect form appears within your web page, the form will automatically default to float on the bottom center of the page.
Directly copy the script for each of the forms that are displayed in your SETTINGS for the widget and insert it inside the <body> of each page you wish to display the form.
Creating PAVE Inspect Forms
Embedding your PAVE Inspect forms on your website, VDPs or blog is another way to automate your dealership's appraisal process. Use the code we've provided to embed your forms anywhere on the web.
To create a form, visit SETTINGS and click the (+) symbol on the top right corner under WIDGETS.
Enter a name for your form. This name will display on your dashboard tracking for all inspections that get generated using this form. You can create multiple forms with a different name to distinguish the type of submissions you receive and control who in your dealership will receive the results for each completed inspection.
Enter the Phone # of the person at your dealership who will receive the results by SMS the moment each inspection gets completed.
Enter a CC Phone # for an additional person who will also get these results at the same time.
Choose the language for the default language to use for the form. (You can create specific forms to match the language used for each webpage)
Choose either the light or dark theme to set the background colour.
Add the HEX colour to change the button colour for the form. (a sample button at the bottom will display the colour you entered)
Click save and copy the script to send to your website provider.
Test and preview form by clicking on the link icon. (PAVE Inspect website used for preview purposes only)
Sample Page HTML (iframe)
<!-- Sample Page With PAVE Inspect Form Widget Added in iFrame -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Test Embed Script on Different Domain | PAVE</title>
<style>
.display-3 {
font-size: 2.5rem
}
.display-4 {
font-size: 2rem
}
h1 {
width: 100%
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="w3-container">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://paveinspect.com/js/launch-widget.js"></script>
<script>
initPAVELauncher({
'container': 'w3-container',
'src': 'https://paveinspect.com/launch-widget/fa9003d5-07a1-425f-8774-9e59e358eefe'
});
</script>
</body>
</html>Last updated
Was this helpful?