In order to customize your media players, click on your profile icon in the top right-hand corner and select the “Player Branding” button from the drop-down list.
Once directed to the “Player Branding” page, you will have the opportunity to customize your embeddable media players in a variety of ways:
- Allowing viewers to download your data visualizations
- Allowing indexing for Search Engine Optimization
- Hiding the title and description of the video
- Preparing a Call to Action button to direct your viewers towards the embedded video
- A checklist of which Insights you would like displayed alongside your video
- Opportunities to upload new Background Images and Logos
- Opportunities to change the Brand color of your videos
Once you have made your desired changes, click the “Save” button in the top right-hand corner.
Overview
Make your embedded media players look exactly like your brand. You can easily customize colors, themes, and fonts to create a smooth experience for your audience.
This ensures your brand identity is consistent across all your content, enhancing professionalism and recognition.
Getting Started
To access this feature, go to Shared Media → Settings → Branding & Customization in your dashboard.
Configuration
You can fully customize the appearance of your embedded media players to match your brand identity.
Follow these steps to adjust your player’s look:
- Go to Shared Media > Settings > Branding & Customization (or Player Settings for media players).
- Colors: Set your Primary Color (buttons, highlights) and Font Color.
- Theme: Choose between ‘Light’ or ‘Dark’ mode base themes.
- Font Family: Select from available fonts (e.g., Poppins, Inter) to match your website.
- Waveform: Toggle ‘Hide Waveform’ if you prefer a cleaner look.
Advanced CSS
For granular control, look for the Custom CSS field in the settings. You can enter standard CSS code here to override specific styles, such as:
.sp-recorder-btn {
border-radius: 20px;
font-weight: bold;
}These changes update the player in real-time.
Next Steps
Ready to get started? Here’s what to do next:
- Login to your account and navigate to the Branding & Customization settings.
- Experiment with the color and theme options to find the perfect fit for your brand.
- Use the Custom CSS field for any advanced styling needs.
Player Branding
Overview
Make your embedded media players look exactly like your brand. You can easily customize colors, themes, and fonts to create a smooth experience for your audience.
This ensures your brand identity is consistent across all your content, enhancing professionalism and recognition.
Getting Started
To access this feature, go to Shared Media → Settings → Branding & Customization in your dashboard.
Configuration
You can fully customize the appearance of your embedded media players to match your brand identity.
Follow these steps to adjust your player’s look:
- Go to Shared Media > Settings > Branding & Customization (or Player Settings for media players).
- Colors: Set your Primary Color (buttons, highlights) and Font Color.
- Theme: Choose between ‘Light’ or ‘Dark’ mode base themes.
- Font Family: Select from available fonts (e.g., Poppins, Inter) to match your website.
- Waveform: Toggle ‘Hide Waveform’ if you prefer a cleaner look.
Advanced CSS
For granular control, look for the Custom CSS field in the settings. You can enter standard CSS code here to override specific styles, such as:
.sp-recorder-btn {
border-radius: 20px;
font-weight: bold;
}These changes update the player in real-time.
Next Steps
Ready to get started? Here’s what to do next:
- Login to your account and navigate to the Branding & Customization settings.
- Experiment with the color and theme options to find the perfect fit for your brand.
- Use the Custom CSS field for any advanced styling needs.
Need help? Contact our support team or check out our other guides.
Need help? Contact our support team or check out our other guides.
Overview
Speak AI embeds are designed to work smoothly 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 use 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.
These changes will only reflect on the iFrames at this moment.
- You need to add “?isHorizontal=true&playerWidth=70&transcriptWidth=30” in your iFrame URL
- You can dynamically change - **playerWidth and transcriptWidth.**The total should be 100.
- For example, Here’s my iframe code - Please check for src or URL and at the end of the URL, please include the above query parameters.
The original URL is:
The new URL with the horizontal view should be:
You can remove Title or Description from the customization options in the app.
Want a hand setting this up? Book a free consult and we’ll do it together on your account.