Skip to main content

Embed Interactions

Discover the API features available for controlling and customizing embedded iframe elements in your applications.

Vatsal Shah avatar
Written by Vatsal Shah
Updated over 2 weeks ago

Embed Interactions

Overview

Speak AI embeds are designed to work seamlessly within your existing pages. While they function independently, you can enhance their behavior and control their initial state using simple URL parameters. This allows you to tailor the playback experience directly from the page where the embed is hosted.

For more advanced control, such as pausing or playing the embed from your parent page, you can leverage JavaScript messaging. This provides a way to communicate with the embed and react to key events like when the player is ready or when playback has finished.

How It Works

You can customize the initial state of a Speak AI embed by adding specific parameters to its URL. These parameters allow you to control aspects like automatic playback, starting at a particular time, or hiding the visual waveform.

For more dynamic control, the embed can send messages to its parent page using JavaScript's postMessage API. These messages inform your page when the player is ready or when playback has completed. To ensure these messages are received, your website's domain must be whitelisted in the recorder settings if security policies are active.

Getting Started

To access this feature, go to Side Navigation β†’ Surveys in your dashboard.

Configuration

You can append the following parameters to your embed URL to control its initial state:

  • ?autoplay=true: Automatically start playback (if the browser allows).

  • ?t=120: Start playback at a specific time, measured in seconds (e.g., 120 seconds).

  • ?hideWaveform=true: Hide the visual waveform display.

The embed may emit the following postMessage events for advanced control:

  • ready: Indicates that the player has finished loading.

  • finish: Signals that the playback has completed.

Next Steps

Ready to get started?

  • Explore the embed URL parameters to customize the initial playback experience.

  • Implement JavaScript messaging to gain more control and react to player events.

  • Ensure your domain is whitelisted if you encounter any security restrictions.

Need help? Contact our support team or check out our other guides.

Did this answer your question?