The ORB Element¶

When working with the DOM, unique elements can be created to automatically integrate with Orbee. There are many benefits to using these custom elements, including easier recognition and less overall text and time spent on the element.

Installation¶

Installation is simple; to utilize these elements, use <orb></orb> elements where you previously used <div data-orb></div> elements. Here's an example replacement:

BeforeAfter

<div ...>
    <div data-orb
        data-type="favorites"
        data-vin="123xyz">
        <span></span>
    </div>
</div>

<div ...>
    <orb
        data-type="favorites"        
        data-vin="123xyz">
        <span></span>
    </orb>
</div>

Types¶

We host multiple types of the ORB element, described by the data-type attribute. These types are described below:

Note

All attributes described below require data- before them on the element. For example, vin is actually data-vin on the element itself.

Type	Description	Required additional fields
`favorites`	the wrapper for an element that will denote the favorites icon for a vehicle	`vin` `stockNumber` see favorites docs here
`ad-placement`	the wrapper for an ad element	`id` see ad server docs here
`plugin`	the wrapper for site plugins, like the personalized navigation bar	`plugin` `default` see OSPP docs here

Identification and Configuration¶

Each plugin you approve for your site will have an ID that stores your configuration for the plugin. We put the ID under the data-plugin-id attribute on the ORB Element.

<orb
    data-plugin-id="{put ID here}"
    data-type="navbar">
</orb>

We also offer three ways to configure your ORB Element -- each level providing you with an additional layer of control:

Orbee provides default configuration
You configure the plugin through our API or UI, and we deliver the configuration over the network
You configure the plugin with attributes on the ORB Element

Each of these down the list have priority over the previous items. Here's an example:

Alternative Implementation¶

If you do not want to implement custom HTML elements, or do not want <orb> elements throughout your HTML due to conflicts or some other reason, you do not have to.

As an alternative, and available throughout the docs, are examples of how to implement the same thing with a div. All elements require the data-orb attribute (identifying that it's an orb element), and require all additional fields to be prefixed with data-.

ORB ElementDIV Alternative

<div ...>
    <orb
        data-type="favorites"        
        data-vin="123xyz">
        <span></span>
    </orb>
</div>

<div ...>
    <div data-orb
        data-type="favorites"
        data-vin="123xyz">
        <span></span>
    </div>
</div>

Last update: 2023-04-13