The service will determine the language of the page based on the lang attribute in the opening
<html> tag. Make sure that the language is set correctly in the <html> tag.
Please choose only one of the following options.
Add the following code snippet to the page as close to the closing </body> tag as possible:
<script>
(function (w, d, s, o, f, js, fjs) {
w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', '_vi', 'https://static.voiceintuitive.com/widget.js'));
_vi('init');
</script>
Important: using Google's services that embed content on websites such as Google Tag Manager may be illegal in countries that enforce the GDPR due to data transfers to the United States that violate the Schrems II decision. The following instructions are intended to be used only if your country allows the use of Google Tag Manager. If you are unsure, please consult a legal professional prior to using Google Tag Manager.
Installation using Google Tag Manager is not recommended, as it may lead to worse performance. Additionally, this installation method may cause content blockers to prevent loading of the script.
Installing the script using Google Tag Manager is possible using the Custom HTML tag feature. Instructions for using this feature are provided by Google.
Add the following code snippet to where you want the "Listen" button to appear:
<div id="voice-intuitive-root"></div>It is recommended to place the button before the start of an article or other readable content.
Preloading the widget is optional, but highly recommended as it improves performance.
If you want to preload the widget, add the following code snippet inside the <head> tag of your website:
<link rel="preload" href="https://static.voiceintuitive.com/widget.js" as="script">
By default, the service will look for any element with class voice-intuitive and speak everything inside it.
The recommended way to mark an area for speaking is therefore to simply add class="voice-intuitive" to its container element.
While the service can find any number of elements marked in this way and read all of them, for the sake of simplicity it is recommended to only
add the class to one element.
By default, the service will not read content that is inside <style/>,
<script/>, <noscript/>, <img/> or <iframe> tags.
If you want to prevent the service from reading a certain area or element, add class="voice-no-read" to that element.
If you are unable to add classes to your website as described above, do not hesitate to contact us for a customized configuration.
Visit the configuration guide page for more info.
The widget is initialized automatically after page load. If your website is a single-page application or otherwise fetches new content without fully reloading the page, you may wish to manually reset the widget after the content on your page changes.
There are two ways of performing a reset. If your page updates do not modify the root element of the widget, i.e. the user interface elements of the widget remain in the DOM through content changes you can call the following method to reset the state of the widget.
window._vi('reset')This type of reset will ensure that the widget fetches new audio after the "Listen" button is clicked again, but it will not detach or re-attach the widget to the DOM.
If you do wish to re-attach the widget to the DOM due to e.g. the root element being modified or re-rendered, you can call the following methods to unmount the widget and then mount it again:
window._vi('unmount')
window._vi('mount')
Calling window._vi('unmount') will remove the widget from the DOM. Calling window._vi('mount')
will attach a new widget to the root element.
You can listen to global events by adding an EventListener by the name like below:
document.addEventListener('voice-intuitive_player_status', function (event) {
//console.log('voice-intuitive_player_status')
console.log(event.detail);
});
List of different global event details by name:
loaded
started
playing
paused
stopped
error
You can command the player programmatically by sending events in the following style:
window._vi('initplaying');
List of different global commands by name:
initplaying /* note, 'initplaying' also starts playing, and 'initplaying' needs to be run before 'play' command works */
play /* 'play' can be used if the playing has been 'pause'd or 'stop'ped */
stop
pause
skip15+
skip15-
changeFastPlaybackSpeed /*1.2 speed*/
changeNormalPlaybackSpeed /*1.0 speed*/
Enable these with the configuration: (see above for configuration)
matomoTrackingEnabled:true
The default category is 'Analytics', you can change it here
matomoTrackingDetails:{category:"MyCategory"}
Default loggings (when enabled) are like this:
window._paq.push(['trackEvent','Analytics','Listen', 'fi'])
window._paq.push(['trackEvent','Analytics','Translate', 'en'])
If you have followed the instructions above but the service does not work as expected, do not hesitate to contact us. We only ask that you provide us with the following information, so we can offer you the best assistance possible.
The service may optionally use localStorage to remember the playback speed preference of the user using
localStorage key voiceIntuitivePlaybackSpeed.
The service may also use localStorage to remember the translation language selected by a user to enable automatic
translations localStorage key voiceIntuitiveTranslationLanguage. Both values are stored indefinitely.
These cookies and related technologies can be considered to be accessibility cookies and as such would probably not require consent from users to be used. However, you still have to inform your users of the fact that these cookies are being used. These features are disabled by default as to prevent accidental cookie policy violations. Please let us know if you wish to enable these features.
In the future the service may use first-party cookies to store information such as items added to a playlist (personalization cookies). These cookies will be disabled by default to prevent any accidental cookie policy violations.
Voice Intuitive Oy does not collect any personal information using the widget. However, the service is powered by Microsoft Azure services, Google Cloud Services and CDN. Microsoft Azure services, Google Cloud Services and CDN are subject to their own privacy policies.