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, color themes, and advanced styling via CSS.
1. Choosing a Layout Style
Sonikit provides two default layout styles for your embedded pre-save:
Compact layout – Ideal for tight spaces like sidebars or mobile displays.
Full layout – Best for highlighting your artist branding with album art, service buttons, and descriptive text.
To select a layout:
Go to your Pre-Save page in Sonikit.
Click "Embed".
Under Layout, choose your desired style.
Copy the updated embed code and paste it into your site.
📸 Example screenshots: Compact vs Full layout
2. Customizing Colors and Fonts
You can easily match your widget to your branding:
Primary color: Applies to buttons and highlights.
Background color: Choose between light, dark, or transparent.
Font style: Choose between system default or artist branding font (if enabled).
To customize colors:
Navigate to the Customize tab inside your pre-save editor.
Scroll to the Embed Appearance section.
Adjust your primary color, background style, and font.
💡 Tip: Use your artist hex codes (e.g., #FF3366) for precise branding.
📸 Example screenshot: Color customization panel
3. Advanced Styling (Optional)
If you need finer control, you can apply custom CSS to your embed container. This allows:
Custom border radius (rounded corners)
Shadow effects
Padding/margin adjustments
Example:
<div style="border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);"> <!-- Sonikit Embed Code Here --> </div>
🔒 Note: Custom CSS should be applied outside of the iframe. You can't style inside the embed directly.
4. Previewing Changes Before Publishing
Use the Live Preview feature in the embed editor to view updates in real time before adding the code to your site.
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
Example:
<div style="max-width: 400px; width: 100%;"> <!-- Sonikit Embed --> </div>
Related Articles
Need help? Contact support or reach out via the in-app chat.