Overview
When you embed a pre-save widget from Sonikit onto your website, you can control how it looks to match your branding, aesthetic, or overall web design. This guide walks you through the customization options available for embedded pre-saves, including layout styles, and color themes.
To open the design settings of you embed:
Click the Embeds link in the left sidebar
Locate the embed that you want to edit
Click the gear icon to open the Settings panel
Click the Design tab
1. Choosing a Layout Style
Sonikit provides three layout styles for your embedded pre-save:
Inline - Streaming service buttons are aligned in a row horizontally
Stacked – Streaming service buttons are stacked vertically
Modal– A single, clean button that opens a window with a list of streaming service options
2. Choosing components
You can choose which elements to display in your pre-save:
Album Art (enable to adjust sizing)
Artist Name
Release Title
3. Customizing Colors
You can easily match your widget to your branding. Use the color controls to adjust the colors of each element or enter specific color codes:
Text color
Button fill
Button stroke
Button text
4. Previewing Changes Before Publishing
The live preview on the right side of the settings panel will show a preview of how your embed will look as you make changes.
5. Troubleshooting Display Issues
If your embedded widget:
Doesn't display at the correct width
Is clipped or hidden
Doesn’t reflect updated styles
Try the following:
Wrap the embed in a responsive
divcontainerAvoid setting a fixed height unless needed
Clear your site’s cache and reload