Search-box Only Widget

Recommended for integration anywhere where space is tight and a simple search box call-to-action might be the best way to help voters find where to vote e.g. website headers, sidebars and footers.

Example showing Search Box and Full Dialogs on the same page

SEARCH BOX EMBED

DIALOG EMBED

Embedding the widget multiple times on on page

The VIT widget can be embedded any number of times on a single webpage, both as the full widget and as a search box, with some restrictions. Below is an example of an HTML snippet one might use to embed the VIT widget:

<link rel="stylesheet" type="text/css" href="https://votinginfotool.org/css/compiled/vit.css"/>
<script src="https://votinginfotool.org/js/compiled/app.js"></script>

<div id="_vit" style="width: 640px; height: 480px;"></div>

<script>
  var config = {
    "embedded-line1": {"en":"My VIT Widget"},
    "logo": {"type":"none"},
    "official-only": true
  };
  var loadVIT = function () {
    if (typeof vit !== 'undefined'){
      vit.core.init("_vit", config);
    } else {
      setTimeout(loadVIT, 500);
    };
  };
  loadVIT();
</script>

The above snippet has three parts:

Two <link> and <script> elements (lines 1-2) that load the VIT application and its stylesheet.
A <div> element (line 4) that indicates where the widget should be embedded.
A <script> element (lines 6-20) that initializes and sets options for the widget.

In order to embed the VIT widget multiple times on a page, some adjustments to this snippet need to be made:

1. Only include the first two lines once per page

The <link> and <script> elements that load the VIT application should only be included once per page, at the beginning of the file. Move these two lines to the <head> or top of the <body> of your page, and remove them from subsequent VIT embeddings. Doing this ensures that the application isn’t reloaded and reset after one widget has already been set up. Including these lines more than once may stop earlier widgets from loading properly.

2. Set different IDs for each widget

The ID for the VIT widget is set in line 4 of the above snippet: <div id="_vit" ..., and also referenced in line 14 when the widget is initialized: vit.core.init("_vit", config);. Each widget on the page must have a different ID. If multiple widgets share the same ID, only one of them will load. This ID can be any string of characters, but it’s recommended that the ID describes the placement of the widget for easy reference, e.g. "_vit-sidebar" or "vit_widget_body".

3. Use the same config for each embed

A current limitation of the VIT widget is that the configuration options must be the same for each embed, excluding the search-box-only? parameter. The config options, set in lines 7-11 of the above snippet, describe custom options for the VIT widget. If the options are not set identically for each embedded widget, some widgets may appear to be configured incorrectly. The search-box-only? parameter is unique in that it may change between embeddings without issue, so some embeds can be full-sized tools while others are just search boxes.

Example of embedding multiple VIT widgets correctly

The following HTML snipped follows the above rules, and should correctly display multiple VIT widgets, one a search box and one a full-sized widget.

<!-- Loading the VIT application -->
<link rel="stylesheet" type="text/css" href="https://votinginfotool.org/css/compiled/vit.css"/>
<script src="https://votinginfotool.org/js/compiled/app.js"></script>

<!-- First VIT widget - only a search box, ID="_vit-sidebar" -->
<div id="_vit-sidebar" style="min-width: 360px; max-width: 640px;"></div>
<script>
  var config = {
    "search-box-only?": true,
    "embedded-line1": {"en":"My VIT Widget"},
    "logo": {"type":"none"},
    "official-only": true
  };
  var loadVIT = function () {
    if (typeof vit !== 'undefined'){
      vit.core.init("_vit-sidebar", config);
    } else {
      setTimeout(loadVIT, 500);
    };
  };
  loadVIT();
</script>

<!-- Second VIT widget - full sized, ID="_vit-main" -->
<div id="_vit-main" style="min-width: 360px; max-width: 640px; height: 480px;"></div>
<script>
  var config = {
    "search-box-only?": false,
    "embedded-line1": {"en":"My VIT Widget"},
    "logo": {"type":"none"},
    "official-only": true
  };
  var loadVIT = function () {
    if (typeof vit !== 'undefined'){
      vit.core.init("_vit-main", config);
    } else {
      setTimeout(loadVIT, 500);
    };
  };
  loadVIT();
</script>