Skip to content

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:

<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:

  1. Orbee provides default configuration
  2. You configure the plugin through our API or UI, and we deliver the configuration over the network
  3. 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-.

<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