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.