Skip to main content

Configuration Introduction

Configuration is set when initializing the widget object, and it can be updated at any time with the updateConfiguration method.

The configuration object has many options, all of which are detailed in this section.

The rootElement configuration property is required, and the inlinePlayerElement configuration property is required to add the inline player. All other properties are completely optional and have defaults set by the Speechify API internally.

Example

Here's a simple example that initializes the player with configuration and mounts it. With this example configuration:

  • The content within the parent element with the ID article will be listenable
  • The inline player will be mounted and displayed right under the element with the ID article-title
  • The play button will be enlarged by 10% with a scale transform
import(
"https://storage.googleapis.com/speechify-api-cdn/speechifyapi.min.mjs"
).then(async (speechifyWidget) => {
// widget configuration
const config = {
rootElement: document.getElementById("article"),
useSpeechifyRoot: true,
customStyles: {
playButton: "transform: scale(1.1)",
},
};
// initialize the widget with config and mount it on the page
const widget = speechifyWidget.makeSpeechifyExperience(config);
await widget.mount();
});

Configuration Options

Below are a links to documentation on all of our possible configuration options.