Implementer Documentation

Warning: All lead/financing forms can be used with test data, however a transaction summary email will be generated and sent to the email address entered in the form. Please use caution when filling out this field.

Using Custom Buttons

Custom buttons allow you to open Suite in a modal so you can keep the workflow separate from the rest of your site. This allows you the freedom of designing your pages without having to make space for the suite modal.

Demonstration

Here are some examples of custom buttons attached to Suite workflows.

Payments

Short Form

Long Form

How do we make this happen?

In order to implement Suite, you will need to do several things:

1. Add suite.js to Your Page

You need to attach suite.js to your page using a script tag. The source should be a direct link to our suite.js javascript file such as "https://ebusiness.dealertrack.com/Suite/suite.js"
Once attached, Suite.js will scan your entire page on load for any elements with the suiteQueryString attribute and attach Suite to those objects.

2. Set Default Suite Attributes

You will need to set several default attributes inside the script tag that will tell Suite how it should operate and look. Here are the attributes that can be set:

widget: The type of widget being used. "customButton" which will set for Custom Buttons, "payment" if you are wanting the PaymentDriver Widget, or "embed" if you are intending to embed Suite.

heightPolicy: This is a key attribute as it will tell Suite how it should behave in terms of changing its height to fit its content. "dynamic" is the default and will tell Suite to adjust its height to fit its content. "inherent" will tell Suite to stay the same height regardless of its content. Use this in cases where you do not want Suite's content to change your page layout.

The resulting script tag should look something like the following:

Note: It may be placed anywhere in the head or body of your page. It does not matter.

3. Specify the suiteQueryString Attribute on Element(s)

This attribute will need to be specified on each element that you want to be a Custom Button. In addition to the accountId, You will also need to specify the variables needed for the initial workflow that your account is set up with like vehicle details for payment calculations.

Check out the Using Suite Query Strings or URL Parameters section for a list of required and optional parameters. The parameters you will need will depend on the workflow you will be starting Suite with.

You may also specify overriding Suite attributes on these elements. These will take precedence over the defaults you set in the suite.js script tag.

Here is an example that uses only the PaymentDriver workflow:

Here is an example that uses only the FinanceDriver workflow

If you have a combined workflow that starts with PaymentDriver, you will only need variables required for PaymentDriver to initialize the workflow.

Note: Suite does not currently style any element with suiteQueryString or add a pointer cursor to indicate that the element is a button. This will need to be specified in your CSS if you would like to specify a button image/style or cursor style. See example below for more information.

Example Code For Custom Buttons

Here is a full example of how to implement Suite using three Custom Buttons as in our demonstration shown above.