Embedding the Operators Wiget

Getting a Widget

Widgets are created inside Whereabouts using the Widgets App. Once you've created a widget, you can grab the embed codes using the Embed Widget button:

Adding the Operators Widget to Your Site

The embed code is added to the html of your page at the place where you want it to appear.

If you are adding multiple widgets to a single page, it is recommended that you load the <script> only once per page. To explain: your embed code has two parts. The first part is to be placed where you want the widget to appear.

<whereabouts-operators-widget
widget-id="XXXX"
access-id="XXXX"
></whereabouts-operators-widget>

The second part should only appear on the page once, ideally before the closing </body> tag.

<script
src="https://api.prod.next.whereabouts.tech/embeddable/widget/operator/1/latest/main.js"
type="module"
></script>

Widget Display Mode

You may display your widget in two different styles. The first is a grid style and the second is the carousel style. By passing the operator-list-display-mode prop to the whereabouts-operators-widget you can change the display mode. If you do not pass this prop, the widget will default to the grid style.

<whereabouts-operators-widget
  ...
  operator-list-display-mode="carousel | grid"
  ...
></whereabouts-operators-widget>

Carousel Mode:

Setting the language

The default language is English (en). You can set the widget to use French (fr) or Spanish (es)

<whereabouts-operators-widget ... lang="en | es | fr" ... ></whereabouts-operators-widget>

Setting the "See Details" behaviour

By default, widgets open a slide out panel with additional details about an operator when they are clicked

Alternately, your website may be powered by the Whereabouts API, and you would like to navigate users to a custom path on your website that involves the operator's details. In this case, you would pass an operator-details-link prop to the widget, which must contain the {OPERATOR_ID} string as the wildcard's placeholder.

<whereabouts-operators-widget
...
  operator-details-link="https://my-organization.com/operators/{OPERATOR_ID}"
...
></whereabouts-operators-widget>

You can also include a human readable segment by adding {OPERATOR_NAME}:

<whereabouts-operators-widget
...
  operator-details-link="https://my-organization.com/operators/{OPERATOR_NAME}/{OPERATOR_ID}"
...
></whereabouts-operators-widget>

After passing this prop in, users will be navigated to the proper page when clicking the "See Details" button on the widget operator card.

If you'd like to use the Slide Out panel and include a permalink, you can add the following prop to your embed code:

<whereabouts-operators-widget
...
  operator-details-display-mode="link | slideout"
...
></whereabouts-operators-widget>

This will add an easy to see permalink in the Slide Out panel to the URL defined using the operator-details-link prop.