Inline Player Placement

To show the Speechify API inline player, you'll need to specify where it is placed on your site.

The inline player attaches itself to a specific element which is called Speechify Root Element.

You need to have this element inside your page.

<div id="speechify-root"></div>

Note: The inline player will not show unless the Speechify Root element is present and useSpeechifyRoot is specified in the configuration.

Example

Here's an example in which the inline player is placed directly under the element with the ID article-title.

import(
  "{CDNLinkToLibrary}"
).then(async (speechifyWidget) => {
  // widget configuration
  const config = {
    rootElement: document.getElementById("article"),
    useSpeechifyRoot: true
  };
  // initialize the widget with config and mount it on the page
  const widget = speechifyWidget.makeSpeechifyExperience(config);
  await widget.mount();
});