ClearCar Trade-In Tool Implementation Guide

Install

Add JavaScript snippet

Insert code snippet at the start of <body>.
There should only be one <script/> that loads drivably.js. Delete duplicates.

Javascript

Copy

Copied!

<script>
  !(function (d) {
    var e = 'https://drvtrd-widget.netlify.app/drivably.js';
    if (!d.querySelector(`[src="${e}"]`)) {
      var t = d.createElement('script');
      (t.src = e), (t.defer = !0), (t.async = !0), d.body.append(t);
    }
  })(document);
</script>

Add HTML container

Define app mount point with drvtrd-container element ID. Insert element at the end of <body/>. However, for embedded mode, insert element on a specific location.
Container should have no children.

HTML

Copy

Copied!

<div
  id="drvtrd-container"
  data-store-id="107"
  data-country="UNITED_STATES"
></div>

Container HTML attributes

Configuration available to support dealer business and branding priorities.

HTML Attribute	Description	Required
id	Value must be `drvtrd-container`.	Yes
data-accent-color	Customize primary button color. Only 6-digit hex values are accepted. Defaults to primary color.
data-accident	Toggle accident question. Accepts `true` or `false` (default).
data-appraisal	Is the widget used for internal appraisal or on dealers website `true` or `false` (default).
data-asking-price	Toggle optional asking price field. Accepts `true` or `false` (default).
data-centered	Align embedded container to the center. Accepts `true` (default) or `false`.
data-contact-info-text	Change contact information text on final page.
data-country	Toggle features depending on the region. Accepts `UNITED_STATES` or `CANADA`.	Yes
data-disclosure	Toggle disclosure questions. Accepts `true` (default) or `false`.
data-email	Toggle email field. Accepts `true` or `false` (default).
data-embedded	Enable embedded container for first page only. Accepts `true` or `false`.
data-embedded-full	Enable embedded container for all page. Accepts `true` or `false`.
data-gutter	Set spacing around the embedded container. Accepts `sm`, `md` and `lg`.
data-height	Set embedded container height. Accepts CSS unit value.
data-inspection-offer	Change the offer page to show link to the monk inspection url.
data-intro-description-text	Change introduction description. If not defined, a default text is shown. Leave this blank (`""`) to skip rendering.
data-intro-header-text	Change introduction header. If not defined, a default text is shown. Leave this blank (`""`) to skip rendering.
data-layout	Enable responsive design. Accepts `mobile` or `responsive` (default).
data-logo-color	Color used on ClearCar logo. Only 6-digit hex values are accepted. Defaults to ClearCar's brand color or `#585959`.
data-logo-image	Custom logo in footer (image is an existing url). If not defined, "Powered by ClearCar" and ClearCar logo are shown.
data-make-model	Toggle vehicle identification by make and model. Accepts `true` (default) or `false`.
data-modal-position	Set the modal placement to `left`, `center` (default) or `right`.
data-new-car	Toggle buy new car field. Accepts `true` (default) or `false`.
data-no-referral-code	Toggle optional referral code field. Accepts `true` (default) or `false`.
data-notes	Toggle optional notes field. Accepts `true` or `false` (default).
data-offer-confirm	Toggle accept and decline buttons on offer screen. Accepts `true` or `false` (default).
data-offer-guide-text	Change offer details and instructions text. Add line break `\n` for paragraphs.
data-offer-step	Show the offer step in the widget or redirect to offer page after contact info. Accepts `true` (default) or `false`.
data-offer-text	Change offer text.
data-ownership-screen	Show ownership screen step in the widget. Accepts `true` (default) or `false`.
data-phone-not-required	Removes validation on phone field. Accepts `true` or `false` (default).
data-primary-color	Color used on buttons and texts. Only 6-digit hex values are accepted. Defaults to ClearCar's brand color.
data-rust	Toggle rust question field. Accepts `true` or `false` (default).
data-scanner	Toggle VIN camera scanner. Accepts `true` (default) or `false`.
data-send-offer-email	Send an offer email upon submission. Works on appraisal mode only. Accepts `true` or `false` (default).
data-show-on-mount	Immediately show modal after app initialization. Accepts `true` or `false` (default).
data-store-id	Unique ID provided by ClearCar.	Yes
data-text-centered	Align textual body content to the center. Accepts `true` or `false` (default).
data-trade-in	Toggle trade in question field. Accepts `true` or `false` (default).
data-vehicle-condition	Toggle condition question to determine if vehicle is used. Accepts `true` or `false` (default).
data-width	Set embedded container width. Accepts CSS unit value.
data-windshield	Toggle windshield cracked question field. Accepts `true` or `false` (default).

Identify modal triggers

For non-embedded mode, trigger elements must be identified to display the modal. Add drvtrd-open-widget class to each element.

<button class="drvtrd-open-widget">Sell My Car</button>