Embedding a Pre-Save directly on your website is a powerful way to capture fan engagement without sending visitors away. With Sonikit, you can easily embed a Pre-Save form that matches your brand and integrates seamlessly with your fan experience.
Why Use an Embedded Pre-Save?
Fans stay on your website instead of navigating to a separate link.
Better control over branding and layout.
Higher conversion rates due to a more integrated experience.
Works perfectly with retargeting pixels and other on-site marketing tools.
Step-by-Step Guide to Embedding a Pre-Save
1. Create Your Pre-Save in Sonikit
If you haven’t already created a Pre-Save, follow our guide: How to Create a Pre-Save Link in Sonikit
2. Navigate to the Embed Code
Go to your Sonikit dashboard
Select the Pre-Save you want to embed
Click the "Embed" tab
Copy the auto-generated JavaScript snippet
Example:
<script src="https://cdn.sonikit.com/embed.js" data-sonikit-id="YOUR-PRESAVE-ID"></script>
3. Add the Code to Your Website
Paste the embed script into your website's HTML where you want the Pre-Save form to appear:
On a landing page
Inside a blog post
In a sidebar or footer widget
Make sure it’s placed after the opening <body> tag or within a <div> with proper layout styling.
4. Customize Styling (Optional)
Sonikit embeds inherit your site’s fonts and layout by default, but you can also:
Apply custom CSS using the
.sonikit-widgetclassModify padding, colors, and form elements
Refer to: Customizing Your Pre-Save Link Page for design guidance.
Example Embed
Things to Keep in Mind
The embed is responsive and works on mobile
Requires no login from the fan
You can embed multiple Pre-Saves on one page if needed
Pixel tracking and fan event analytics are automatically included
Related Articles
Need help? Contact our support team or visit our Developer Documentation.