Skip to main content

Getting Started

The documentation covers integration with Volt's widgets.

Every widget is served through a tiny JS bundle that runs in any modern browser. It installs Web Components that you can then use to add specific Volt functionalities to your website.

Dependencies

Every dependency is already bundled inside the script. They are:

  1. Vue 3.4.15 or newer
  2. Pinia 2.1.7 or newer
  3. Maska 3.0.0-beta5 or newer
note

Lean bundles without dependencies are planned to be served in the near future.

Authentication

Authentication is done reading the id attribute of the widget's HTML tag.

note

The authentication method will change in the distant future.

Every widget needs to receive your exclusive identification hash to be installed in the DOM. The identification hash is provided by us to you upon request.

Once you have the hash, you can add it to any widget HTML tag like this:

<c1-some-widget id="yourIdGoesHere" />

It must be present when the script gets loaded in the browser. It is not reactive meaning it can be removed after window.$volt_ready is called.

Options

Options are passed to our widgets through HTML attributes. Every widget has its own set of options.

Boolean Attributes

Boolean attributes are attributes that can indicate true / false values by their presence on an element. For example:

<c1-some-widget popoup />

Is equivalent to:
<c1-some-widget popup="true" />

Usage

First include our bundle before the end of your <body> tag:

<script src="https://widget.voltdigital.com.br/voltweb.umd-module.js">

Now include the desired widget anywhere in your HTML and change yourIdGoesHere with your Exclusive Identification Hash:

<c1-some-widget id="yourIdGoesHere" />

You can check wich widgets are available in the Widgets section.