Player Visibility

You might want to show or hide the player based on whether the page is loaded or whether the article is playing. We provide several a configuration property called visibility to do this.

Example

Here's an example where the widget is not shown initially, but is shown when the article starts playing. This is a common use-case for publishers, where the inline player is shown and the widget appears when the article begins playing from the inline player.

import(
  "{CDNLinkToLibrary}"
).then(async (speechifyWidget) => {
  // widget configuration
  const config = {
    rootElement: document.getElementById("article"),
    useSpeechifyRoot: true,
    // all custom visibility options go in this object
    visibility: {
      showWidget: false,
      showWidgetOnPlay: true,
    },
  };
  // initialize the widget with config and mount it on the page
  const widget = speechifyWidget.makeSpeechifyExperience(config);
  await widget.mount();
});

Visibility Properties

Here are the visibility properties used to show or hide the player:

Property Name	Meaning	Default Value
showWidget	whether the widget should be shown onload	true
maximizeWidget	whether the widget should be maximized onload	true
showInlinePlayer	whether the inline player should be shown onload	true if inlinePlayerElement is provided
showInlinePlayerOnPlay	whether the inline player should be shown on play	true
showWidgetOnPlay	whether the widget should be shown on play	true
maximizeWidgetOnPlay	whether the widget should be maximized when the article is played	true