Enhance
Embed Maker projects directly on your website and manage them without touching code. Add, remove, or swap projects from a simple toolbar anytime you want.
Benefits
Deploy the embed code once, then manage everything else from a toolbar
Add, remove, or swap Maker projects anytime without touching code again
Personalize by device, campaign, or visitor segment
Test new content instantly without deployments
Getting Started
If you are logged into your Maker account, head over to your site where you plan to add the project and look for the Maker Enhance icon.
From the settings panel, click on Enhance, then click Install. You'll see a window with your embed code and setup options.
Choose your setup type: Select either Static or SPA depending on your website.
Copy the embed code: You'll see the script to paste into your site's HTML. Copy this and paste it before the closing </head> tag on your site.
Whitelist your domain: Under "Only load on these websites," add your domain (for example, yoursite.com or localhost for testing). The script will only work on domains you add here.
Optional: Toggle "Show sign-in button on enhanced pages" if you want your team to be able to log in and edit from the live site.
Publish: Click Publish to save your settings.
That's it. Once the code is live on your site, you're ready to start adding projects.
Enhance for static sites
Add one script to your site's code, and Enhance will let you pick and choose where to place content right from a live preview.
Step 1: Add the Script
Paste the embed code anywhere in your site's <head> section. It doesn't matter where exactly. Somewhere near the top is fine.
Step 2: Set Up Section IDs
Enhance works by targeting sections of your page using their ID attribute. Make sure the sections where you want to place content have unique IDs. The following are just examples for your reference:
Enhance for Single Page Applications (SPAs)
SPAs work a bit differently because the page doesn't reload. You'll need to tell Enhance which sections it can work with upfront by adding slot attributes to your code.
Step 1: Use the Right Script
Make sure you're using the SPA version of the embed code. It includes an extra parameter: data-maker-page-type="SPA"
Step 2: Define Your Slots
Add data-maker-slot attributes to the sections where you want to place Enhance projects. Give each slot a descriptive name. The following are just examples for your reference:
Step 3: Configure Projects in Slots
Once your script is live, you can use the Edit feature to place content.
Visit your site and open the floating Maker Enhance toolbar. If you don't see the toolbar, add mkr-toolbar=true to the URL (for example, yoursite.com?mkr-toolbar=true). Open the floating Maker Enhance toolbar
Click "Edit Page" in the toolbar
Select the slot where you want to add a project
Choose which Maker project to place there
Click publish, and your changes will go live immediately.
Slot Placement and Order
A quick note: the order that slots appear in your toolbar might not match the order they appear on your page. That's because Enhance detects slots as they appear in your code, and the toolbar just displays what it finds. The important thing is that projects land in the right visual spot on your page, which they will.
The dropdown (Append / Replace / Before / After) controls how the Maker content gets injected into that slot:
Append — adds the Maker content after whatever's already in that slot
Replace — removes the existing slot content entirely and puts the Maker content in its place
Before — inserts the Maker content before the existing slot content
After — same as Append, inserts after
Setting Up Rules and Conditions
Beyond just placing content, you can use rules to show different projects based on conditions like device type, URL path, or query parameters. This is where things get powerful.
What Are Rules?
Rules let you say things like: "On mobile, show this project" or "When visitors arrive with this UTM parameter, show them this version instead."
How to Create a Rule
Open the toolbar and go to "Organization Rules"
Click the rule you want to modify, or create a new one
Set your condition (path, device type, query parameter, etc.)
Choose which project should show when that condition is true
Click publish
Rule Priority
If you have multiple rules that could match the same visitor, the one that's highest on your list wins. So order matters. If you want visitors from a specific campaign to see one version, and everyone else to see another, make sure the specific rule is listed first.
Common Rule Examples
Show different content on mobile vs. desktop
Display a specific project when a visitor lands on a certain page
Change content based on a UTM parameter (great for campaigns)
Personalize based on visitor segments (if you're using variants)
Tip: Duplicating Rules for Variations
If you want the same selectors and configuration but with different conditions (like mobile vs. desktop), just duplicate an existing rule. It copies everything for you, and you can then tweak the condition.
Viewing Performance with Insights
Want to see how your Enhance projects are performing? Use the Insights view.
Open the toolbar and go to "Insights"
Select the project you want to check on
Pick a date range
You'll see performance data for that project
For more detailed analytics, click "View Insights" to access the full analytics dashboard. There you can dig into conversion data, links, overlays, and more.
Troubleshooting
A section isn't showing up in Select and Edit
Make sure it has a unique ID attribute. If it does, it might be a layout issue where the section fills the full page width. Try selecting a different section, or chat with our team about adjusting the design.
Content doesn't appear on my site
Check that:
Your domain is whitelisted in your settings
The script is in your site's
<head>For SPAs: you're using the SPA version of the script, and your slots are properly named
I see a flash when the page loads (SPA only)
For single-page applications, there might be a brief flash before content loads; however, this is rare.
How do variants and personalization work with Enhance?
If your Maker project has variants or personalization rules set up, those still work exactly as they normally would. They'll trigger based on the conditions you've set in your project, and they'll display within their assigned slot.
Next Steps
Once Enhance is live on your site, remember that:
You can edit your projects without touching any code
You can test new versions in your dev environment first
You can A/B test different projects in the same slot by using rules
Performance data is available whenever you need it
FAQs
Do I need a developer to set up Enhance?
It depends on your site. For static sites, you just need someone who can add a script tag to your HTML before the closing head tag. That's it. For SPAs, you'll need your dev team to add slot attributes to your code. It's a small change, but they'll need to handle it.
What's the difference between static sites and SPAs?
Static sites serve the same HTML to every visitor. With Enhance, you can pick and choose where to put content using a visual toolbar. SPAs (single page applications) are built with frameworks like React or Vue and load content dynamically. With SPAs, your dev team needs to define slots ahead of time so Enhance knows where it can put things. After that, it works the same way.
Can I test Enhance before going live?
Absolutely. You can whitelist localhost and test everything in your dev environment first. That way you can see exactly how it'll work before pushing to production. This is actually how we recommend starting out, especially for SPA implementations.
How long does it take to set up?
Static sites can be live in minutes. You add the script, and you're good to go. SPAs take a bit longer because your dev team needs to add the slots, but once that's done, you're set.
What if I want to remove Enhance later?
Just delete the script from your HTML. Nothing will render without it. Enhance only works within the boundaries you've set, so removing the code removes everything.
Can I change which projects show without redeploying my site?
Yes, that's the whole point. You can swap projects, add new ones, or remove them anytime from the toolbar. No code redeploy needed.
How do I show different content on mobile vs. desktop?
Use rules. Create two rules for the same page, one with a mobile condition and one for desktop. Assign different projects to each, and Enhance will show the right version to each visitor.
Can I use Enhance with campaigns or UTM parameters?
Yes. You can set up rules based on query parameters, so you can show different projects to different campaign audiences without any manual work.
What happens if I have multiple rules that could match?
The first rule that matches wins. So if you have a specific campaign rule and a general rule, list the campaign rule first. Enhance evaluates rules from top to bottom and uses the first match.
Do my variants and personalization still work inside Enhance projects?
Completely. If your Maker project has variants or personalization set up, those continue to work exactly as they normally would. They'll trigger based on the conditions you've set in the project itself, and they'll display within the slot you've assigned.
Is it safe to let Enhance inject content on our site?
Yes. You're adding our script to your site, which means you have complete control. If you ever want to stop using Enhance, you delete the script. We can only add content to the sections you've explicitly allowed, and nothing else on your site is affected. Think of it like giving us specific doors to a specific room, and we only work within those doors.
Do you need access to our codebase?
No. Enhance only requires the script in your head tag and whitelisted domains. We're not accessing your codebase or any other systems.
What domains can I whitelist?
Any domain you own. You can whitelist yoursite.com, www.yoursite.com, staging.yoursite.com, or localhost for testing. Add as many as you need.
What if I see a brief flash when content loads?
This can happen with SPAs when content doesn't render immediately. It's rare.
What about GDPR and privacy?
Enhance doesn't collect or store visitor data beyond performance metrics. Your visitors' personal information isn't shared with us. Maker does not store or retain any PII (Personally Identifiable Information)
A section isn't showing up in Select and Edit. Why?
Make sure the section has a unique ID attribute. If it does and it still doesn't show, it might be a layout issue where the section fills the entire page width so try selecting a different section.
Content isn't appearing on my site. What do I do?
Check a few things: Is your domain whitelisted? Is the script in your head tag? For SPAs: are you using the SPA version of the script, and are your slots properly named?
The toolbar isn't showing up. What do I do?
Make sure you're on a whitelisted domain, the script is live on your site, and you've added ?mkr-toolbar=true to the URL (for example, yoursite.com?mkr-toolbar=true).
I published changes, but they're not showing. What do I do?
Give it a moment to propagate. Refresh the page after you publish. If it's still not showing, check that you selected the right section and the right project.
Can my whole team edit with Enhance?
If you toggle "Show sign-in button on enhanced pages" during setup, your team can log in and make edits directly from your live site. Otherwise, it's just whoever has access to the installation settings.
What permissions do people need to edit?
They need to be logged into their Maker account and have access to your organization. If they can see your projects in Maker, they can edit them through Enhance.
Can I limit which team members can make changes?
Right now, anyone with organization access can make Enhance edits.
What if my site structure is complicated?
Enhance is flexible. Whether your sections are vertical, horizontal, nested, or in unusual layouts, as long as they have IDs (for static) or slot attributes (for SPA), Enhance can work with them. The toolbar just needs to know what to target.
Can I use Enhance with a headless CMS?
Yes. As long as your headless CMS renders HTML with identifiable sections or slots, Enhance can work with it.
Do I have a limit on how many projects I can embed?
Nope. Embed as many as you want across as many sections as you need.
What if I want to embed multiple projects in the same section?
Enhance is designed for one project per section.
How do I make sure my Maker content loads quickly and doesn't leave a blank space while the page loads?
This is already built into your embed code. The script tag includes fetchpriority="high", which tells the browser to prioritize fetching it over other lower-priority resources on the page, so it doesn't get queued behind images, fonts, or other scripts. Combined with the script being placed in <head> and marked async, your Maker content can start loading as early as possible without blocking the rest of the page from rendering -- so it shows up quickly instead of leaving a visible gap.
If you have an older embed code that predates this update, you can get the same benefit by adding fetchpriority="high" to your existing script tag -- no need to regenerate the embed code.
Last updated
Was this helpful?