📘

Before you begin

This walkthrough contains URL parameters format. You can get URL parameters from Storyly Dashboard -> Content.

The URL parameters format;

JavaScript

?storyly=[storyGroupId]
or
?storyly=[storyGroupId, storyId]
or
?storyly=[storyGroupId, storyId, "PlayMode"]

Open Fullscreen Content with Content IDs

If you already have the specific Content IDs (Story Group ID and Story ID), you can open them programmatically by calling the openStory method on the widget controller.

storylyPlacement.on("widgetReady", async ({ widget }) => {  
  if (typeof widget?.openStory !== "function") return;

  await widget.openStory({
    group: 12345,          // Story Group ID / Feed Group ID (Required)
    story: 67890,          // Story ID / Feed ID (Optional)
    playMode: "sg"         // Play mode (Optional, e.g., "sg" or "s")
});  
});

Play Modes in Content Links

Play Modes define the playback flow of the content once it is launched fullscreen. Both the StoryBar and VideoFeed widgets support the following modes:

• Playing to the End (Default)

This mode plays the selected content group starting from the specified content, then automatically continues playing the next active content groups in order until the end. This is the default behavior if no play mode is defined.

• Playing a Single Content Group

This mode plays only the specified group starting from the specified content and closes the fullscreen player immediately when the group finishes. To use this, set playMode to "sg".

• Playing a Single Content Item

This mode plays only the specified single content item (story) and immediately closes the fullscreen player. To use this, set playMode to "s". Note: A valid story (content ID) is required when using this mode.

Setup Listeners

You can set up listeners to handle events and failure cases (such as when content fails to open because of invalid parameters or inactive content).

Handle Open Failed Event

const storylyPlacement = document.getElementById("storylyPlacement");
storylyPlacement.on("storyOpenFailed", (data) => {
    console.error("Failed to open content:", data.errorMessage);
});