Link to the installation guide
The Voice Intuitive widget can be configured in numerous ways to alter its features, functionality and appearance. By default, a configuration file containing these settings is retrieved from the server. If you wish, you can override these settings by using a local configuration. The priorities for using different configurations is as follows:
Make sure that you read these instructions and have understood them before attempting to use local configuration. The available local configuration settings described in this document may change over time, and it is therefore possible that you will have to manually update the installation script on your website to adjust to these changes.
Local configuration is specified by feeding the desired configuration object to the widget initializer function as an argument. Here we have a default installation script:
<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>Here we have a default installation script with local configuration that turns the "Listen" button green:
<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', {buttonForegroundColor: "#FFFFFF", buttonBackgroundColor: "#006261"});
</script>By specifying more values in the configuration object it is possible to extensively alter how the script works.
This is what the default configuration object looks like:
{
debug: false,
skipRemoteConfig: false,
readAreaSelector: ".voice-intuitive",
buttonContainerSelector: "#voice-intuitive-root",
buttonForegroundColor: "#ffffff",
buttonBackgroundColor: "#000000",
buttonMargin: "15px 0",
controlPanelEnabled: true,
controlPanelShadowColor: "#a9a9a9",
controlPanelBackgroundColor: "#ffffff",
controlPanelForegroundColor: "#333333",
textHighlightingEnabled: false,
textHighlightDelay: -0.1,
textHighlightPrimaryColor: '#00000016',
textHighlightSecondaryColor: '',
shareButtonEnabled: true,
useLocalStorageForSpeedSelector: false,
excludeText: {
id: [],
className: ["voice-no-read"],
tagName: ["STYLE", "SCRIPT", "NOSCRIPT", "IMG", "IMAGE", "IFRAME"],
elementTextContent: [],
singleWords:[]
}
smallSize:false,
prependButtonsInButtonContainer:false,
extraCSSForListenButton:"",
extraCSSForTranslateButton:"",
disabledPaths: [],
translationAreaSelector: '.voice-intuitive',
translationButtonMarginBottom: '0',
useLocalStorageForTranslationLanguage: false,
hidden: false,
autoTranslationEnabled: false
}
If any of the following values are omitted, the widget will retrieve the corresponding value either from the server or use the default value.
Value: Boolean. Setting value to true enables printing various debug messages to the console.
Value: Boolean. Setting value to true completely skips retrieving configurations from the server.
Only values from the local configuration will be used. If a value is missing from local configuration, the default
value will be used. Enabling this setting improves performance, as there is no need to wait for the remote server to
provide the configuration file.
Value: string. Must be a valid CSS selector. This value is used to select the area that the widget will read. While selecting multiple elements in this manner is theoretically possible, it might result in undefined behavior. Ensuring that this selector only matches one element is recommended.
Value: string. Must be a valid CSS selector. The first (depth-first pre-order traversal) element that matches this selector is where the "Listen" button will appear.
Value: string. Must be a valid hex color with a value between #000000 and #ffffff. This value is used to select the color of the Voice Intuitive glyph that appears on the "Listen" button.
Value: string. Must be a valid hex color with a value between #000000 and #ffffff. This value is used determine the color of the text and the circle on the "Listen" button.
Value: string. Must be a valid value for setting a margin in CSS. This value is used determine the margin around the "Listen" button.
Value: string. Setting value to false results in the control panel not appearing once the "Listen"
button is clicked. Audio can only be controlled through playing or pausing using the "Listen" button.
Value: string. Must be a valid hex color with a value between #000000 and #ffffff. This value is used determine the color of the shadow the control panel has. Only applicable if control panel is enabled.
Value: string. Must be a valid hex color with a value between #000000 and #ffffff. This value is used determine the background color of the control panel. Only applicable if control panel is enabled.
Value: string. Must be a valid hex color with a value between #000000 and #ffffff. This value is used determine the color of text and icons that appear on the control panel. Only applicable if control panel is enabled.
Value: number. This value determines the delay after which a word is highlighted when reading the text. The number provided indicates the delay in seconds and negative or positive values can be used. Only applicable if text highlighting is enabled.
Value: string. Must be a valid hex color with a value between #00000000 and #ffffffff. Default is transparent gray: #00000016. Transparency is supported. This value determines the background color of the first highlighted word. Only applicable if text highlighting is enabled.
Value: string. Must be a valid hex color with a value between #00000000 and #ffffffff. Default is no value. Transparency is supported. This value determines the background color of the two subsequent highlighted words after the first one. Only applicable if text highlighting is enabled.
Value: boolean. Setting this value to true means that on supported browsers a share button appears on the control
panel. Clicking this button allows the end user to share this article using the sharing API that is built-in on their device.
Disabling this setting causes this button not to appear.
Value: boolean. Setting this value to true means that the user preference for selecting a playback speed
is stored in browser localStorage. This is classified as a personalization cookie and should be treated as such in
your cookie notice if your local jurisdiction requires one.
The value for this setting is an object with the following keys: id, className, tagName, elementTextContent and singleWords. Each key must have an array of strings or an empty array as a value. Content matching these id's, classes, tags or text will not be read. Field 'elementTextContent' will match whole strings in an element.