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:
- Vue 3.4.15 or newer
- Pinia 2.1.7 or newer
- Maska 3.0.0-beta5 or newer
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.
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.