> For the complete documentation index, see [llms.txt](https://docs.maker.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maker.co/features/enhance.md). # Enhance

*** ### 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 `` 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 `` 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. 1. 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

2. Click "Edit Page" in the toolbar

3. Select the slot where you want to add a project

4. Choose which Maker project to place there

5. 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 1. Open the toolbar and go to "Organization Rules" 2. Click the rule you want to modify, or create a new one 3. Set your condition (path, device type, query parameter, etc.) 4. Choose which project should show when that condition is true 5. 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. 1. Open the toolbar and go to "Insights" 2. Select the project you want to check on 3. Pick a date range 4. 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 `` * 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](http://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 `` 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.

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.maker.co/features/enhance.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.