Embedding Suite

Below is a demonstrated example of embedding the full Suite app into a web page. When embedding Suite, you are providing your user with a container within your page that holds the entire app. Suite will automatically size itself to take up the full space of that container by default. Additional settings can be applied to tell Suite to size its height to surrounding elements within your page if desired.

Demonstration

Here is a demonstration of what embedding would look like.

How do we make this happen?

In order to implement an Embedded 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:

3. Specify the suiteQueryString Attribute on Container Element

This attribute will need to be specified on your container element where you would like to embed Suite. You will need to specify the accountId that you will be using.

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 what the basic embed code will look like:

Embedding Suite For Accounts

You will need to start Suite with a few additional variables in order to put a particular vehicle in scope. Here is an example:

Set Suite to Match Height of Other Element(s)

If you would like your embedded Suite to match the height of an outside element such as an ad that is located beside Suite on the page, then you can specify the element id(s) in the heightEls attribute in the script tag. If you specify more than one id, then Suite will match the height of the tallest element.

heightEls: This is the id or ids of the elements you would like to have Suite match height with.

heightPolicy: This will tell Suite HOW it will go about matching height to heightEls element(s).

Example Code - Embedding with FinanceDriver

Here is a full coding example that demonstrates the implementation of an embedded Suite app for an account with the FinanceDriver long-form workflow.