> For the complete documentation index, see [llms.txt](https://docs.intelligems.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.intelligems.io/content-experiences/content-experiences-overview/how-to-set-up-a-styles-and-javascript-experience.md). # How to set up a Styles and Javascript Experience A Styles & JavaScript experience injects your own CSS and JavaScript for a chosen group of visitors, so you can find out whether a change lifts conversion before you commit it to your theme. CSS lets you hide buttons or text, change layouts and spacing, swap backgrounds, or change your color palette and fonts. JavaScript lets you pop up messages, change button behavior, send information elsewhere, and a good deal more. Nothing you do here touches your live theme, and nothing needs a developer to deploy it. You build the change once, then choose how it runs. {% hint style="info" %} **You don't always need a Styles & JavaScript experience to write CSS.** Every experience carries the same Styles & JavaScript editor, whichever type you picked. Restyling the price block during a Pricing experience, or the shipping row during a Shipping experience, belongs inside that experience rather than in a second one running alongside it. Build a Styles & JavaScript experience when the code *is* the change you're testing. {% endhint %} ### **1. Pick the experience type** On the **Content** page, click **New Content Experience** and choose **Styles & JavaScript**. ### **2. Choose how it runs** Intelligems asks how you want to run the experience. | Choice | What happens | | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | **Run a Test** | Visitors are split between groups, each group gets its own code, and results show which version lifts conversion and profit per visitor. | | **Create a Personalization** | Your code shows to everyone who matches your targeting, with no group held back for comparison. | If you're not sure, start with a test. You can roll the winner out later. ### **3. Name it, if you want to** Intelligems names the experience for you from the type and the date, like `Styles & JavaScript Test ยท Aug 6`. You don't have to change it. It's worth changing anyway. The name is internal, and tests can stay live for weeks, so a name that says what the code does saves your future self the guesswork. 1. Hover the experience name at the top of the page. 2. Click the pencil. 3. Enter a **Name**, and a **Description** if it helps. 4. Click **Confirm**. ### **4. Set up your test groups** Running a Personalization? Skip groups entirely. You're writing one set of code for your targeted audience. For a test, the **Test Groups** tab starts you with a Control Group and one variant, split 50/50. The Control Group gets no injected code, so it sees your site as it is today. * Click **+** to add another group, one per version of the code you want to compare. * Click the pencil next to a group name to rename it. * Drag the slider to change how traffic divides. The more groups you add, the longer the test takes to reach statistical significance. ### **5. Write your CSS and JavaScript** Open the **Modifications** tab. **In a test,** the **Styles & JavaScript** section is at the bottom. Use the dropdown at the top to pick which test group you're editing. Each group gets its own code. **In a personalization,** click **+ Add modification**, choose **Styles & JavaScript**, then **Add modification** again. There's no group dropdown, because everyone who matches your targeting gets the same code. #### **CSS Styles** Start on the **CSS Styles** tab. To style an element you need its classname, which you can find with your browser's inspector. {% hint style="success" %} Not comfortable writing CSS? Click **Generate with AI**, describe the change you want in plain English, and Intelligems writes it for you. You can edit whatever it produces. {% endhint %} For larger changes across a page, the [Visual Builder](/general-features/editors/visual-builder.md) lets you click an element instead of hunting for its selector, and it can edit CSS, JavaScript, and HTML in the same session. #### **JavaScript** Switch to the **JavaScript** tab and enter the code you want injected for the selected group. **JavaScript Injection Timing** controls when your code runs. New experiences default to **Immediately**. * **Immediately**: injected as soon as possible, loading at the same time as the rest of your content. Ideal for critical code that needs to run without delay. * **After Page Load**: injects once the page's content has fully loaded and is ready to use, after the DOM is loaded. Great for scripts that rely on the page's structure. * **Delay**: holds injection for a set time. A delay of 1 to 2 seconds is worth choosing for non-essential scripts, because it keeps them from competing with the rest of the page for load time. ### **6. Add targeting, if you need it** By default your code runs for every visitor in the group, on every page where the selectors match. The [**Targeting**](/general-features/targeting.md) tab narrows that by device, new or returning visitor, traffic source, country, currency, page, or product. [Page Targeting](/general-features/targeting/page-targeting.md) is the one to reach for most often here. Scoping a PDP-only style change to product pages keeps it from firing on your collection and cart pages, where the same classname may appear on something you didn't mean to touch. ### **7. Configure analytics** On the **Configure Analytics** tab, choose up to seven Key Metrics for the front page of your results and mark one as **Primary**. Revenue per Visitor is the default. Profit per Visitor is the better primary metric if you've uploaded COGS, since it accounts for margin rather than top-line revenue. {% hint style="warning" %} [Custom metrics](/analytics/overview/custom-events.md) have to be added before you start, and they can't be backfilled once traffic is running. This matters more here than on other types: if your JavaScript adds a button or a module, a click event on it is often the only way to tell whether anyone used the thing you built. {% endhint %} At the bottom of the tab, choose how orders count toward your results: all orders, or only orders containing certain products. You can change this later. ### **8. Preview, then start** Use the **Preview** tab to check each group on your live site before a visitor sees the code. Injected CSS and JavaScript is the one modification type where a small mistake can break a page for a whole group, so check the pages your selectors reach and not only the one you were editing. When it looks right, click **Start** for a test, or **Enable** for a personalization. The [Content Experience QA Checklist](/content-experiences/content-test-qa-checklist.md) covers what else to check. For more on writing effective CSS and JavaScript for Intelligems, including further examples: [CSS Styles and JavaScript Injection](/general-features/editors/onsite-editor/css-and-javascript-injection.md) --- # 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, and the optional `goal` query parameter: ``` GET https://docs.intelligems.io/content-experiences/content-experiences-overview/how-to-set-up-a-styles-and-javascript-experience.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.