HTML Editor- Custom JS Formatting Code Blocks

The Custom JS Editor allows you to inject JavaScript directly into your HTML Environment demo by adding a script tag to each canvas. This provides direct access to customize the behavior and functionality of your demo. It also exposes the reprise object from the RuntimeCanvas class to the global context on every screen. This enables you to structure your code to listen for on-screen events and execute demo actions seamlessly.

AVAILABLE LISTENERS

Custom JS provides several event listeners that you can hook into for enhanced interactivity. Here are the types of listeners available:

• change_screen: Triggered when the screen changes. (does not fire on first screen load)
• leave_screen: Triggered immediately before the screen changes.
• mount: Triggered when the canvas is loaded on the first screen only.
• flow_step: Triggered during every flow step. (includes first screen load)

Note: for the first leave_screen trigger, the context is empty due to limitations of our infrastructure. Only happens for the first screen, so if the context is empty then it's the first screen

You can add listeners by using:

reprise.on(type, (context) => {
  // Your custom code here
});

Example:

reprise.on("change_screen", (context) => {
  console.log("Screen changed to: ", context.screen.title);
});

Example of a code setup so that the code fires once on all screens:

reprise.on("mount", (context) => {mainCustomJSFunction(context)}); // first screen
reprise.on("change_screen", (context) => {mainCustomJSFunction(context)}); // others

function mainCustomJSFunction(context) {
    // do something here
}

UNDERSTANDING THE LISTENER CONTEXT

The context parameter gives you useful information about the current state of the canvas. Here’s a breakdown of what you can access:

type CustomJSContext = {
  screen: ScreenData | null;
  screen_id?: ContentNodeId | null;
  replay_id?: string;
  replay_title?: string;
  client_id?: string;
  environment?: "editor" | "preview" | "publish";
  flow_id?: ContentNodeId;
  last_screen_id?: ContentNodeId | null;
};

type ScreenData = {
  title: string;
  created_at: string;
  properties: Record<string, unknown="unknown">;
  screenshot_small: string;
  display_width?: string;
  page_info?: ScreenPageInfo;
  screen_type?: ScreenType;
};

• screen: Details about the current screen (e.g., title, creation date, properties).
• screen_id: The ID of the current screen.
• replay_id and replay_title: Identifiers for the replay.
• client_id: The client ID if available.
• environment: Indicates whether the canvas is in editor, preview, or publishmode.
• flow_id: flow_id of the new screen
• last_screen_id: scrn id of prev scrn

Screen Data

• title: The screen title.
• created_at: Timestamp of when the screen was created.
• properties: A record of custom properties for that screen.
• screenshot_small: URL of a small screenshot preview.

EXECUTING ACTIONS WITH REPRISE.EXECUTE_ACTION()

Custom JS also allows you to execute actions that control the flow of your replay. You can use reprise.execute_action(action: FlowAction) to trigger predefined flow actions.

AVAILABLE ACTIONS

• flow_next: Moves to the next flow step.
• flow_prev: Moves to the previous flow step.
• flow_next_screen: Moves to the next screen.
• flow_prev_screen: Moves to the previous screen.
• goto_screen: Jumps to a specific screen by providing the screen_id.

EXAMPLE:

// Example for navigating to a specific screen
reprise.execute_action({
  type: "goto_screen",
  screen_id: "scnr-1234"
});

// Example for moving to the next screen
reprise.execute_action({
  type: "flow_next_screen"
});

// Example for moving to the next flow step
reprise.execute_action({
  type: "flow_next"
});

SENDING MESSAGES WITH REPRISE.POST_MESSAGE()

In addition to executing actions, you can also send messages using reprise.post_message(message: any). This method allows you to send a message up the iframe to the parent so that it can be listened for in the case of an embedded iframe

EXAMPLE:

reprise.post_message({
  event: "custom_event",
  data: {
    key: "value"
  }
});

This sends a message to the top-level window, allowing you to pass information between your custom JS and other scripts or systems.

Related to

• JS