How this guide works: Each section is a milestone. Complete them in order. Most steps link to deeper articles if you want to go further, but you don't have to. The goal is your first experience live, not perfection.
🗺️ The Full Picture
Before you dive in, here's the full picture. The main build path runs left to right. Data connections run in parallel — start that conversation early so it doesn't delay your launch.
🎓 Register for BlueConic University
Before you dive into the steps below, we strongly recommend registering for BlueConic University. It's where your training lives, and courses are linked throughout this guide.
Register at BlueConic University using your work email.
Search for Experiences by Jebbit to find your onboarding courses.
Complete the New User Roadmap — five bite-sized videos that walk you through the platform before you build.
Module | Length |
Intro to Experiences by Jebbit | 2 min |
Setting Up Your Brand Environment | 10 min |
Building the Experience | 23 min |
Setting Up Experience Logic | 22 min |
Launching an Experience | 3 min |
💡 Total watch time: ~60 minutes. Watch one module at a time between meetings — by the time you're ready to build, you'll already feel at home in the platform.
✅ Experience Strategy Foundations: The 5 W’s (and How)
The biggest reason first experiences stall isn't the platform. It's going in without a clear plan. Five minutes here saves hours later.
Answer these questions before you build:
What type of experience do I want to launch? (Quiz, Survey, Product Finder, etc.)
Who is the audience? (New visitors, loyalty members, email list?)
Where will it live? (On your site, in email, social, QR code?)
When will it go live? (launch timeline, duration?)
Why does this matter? (Lead capture, product discovery, data enrichment?)
How will I know it worked? (Define 1 primary KPI — completion rate, leads captured, conversions)
💡 Pro tip: You don't need a perfect experience. You need a launched experience. A simple 4–7 screen quiz with a clear goal will always outperform a complex build that never ships.
Recommended for first-timers: Start with a quiz or survey. They're fast to configure and consistently drive strong engagement.
🎨 Step 1 — Set Up Your Brand Environment
Time: ~30 minutes | Do this once
Your Style Guide is the foundation. It controls how every experience looks — fonts, colors, buttons, logo, and backgrounds. Setting it up now means you won't have to style each experience from scratch.
What to gather before you start:
Logo (transparent .png)
Brand fonts (.otf or .ttf files)
Brand colors (hex codes)
Button styling preferences
Background imagery (refer to the design spec sheet for sizing)
How to set it up:
Log in — you'll land on the Builder tab automatically.
Navigate to Style Guide in the Builder dropdown.
Upload your logo, fonts, and colors.
Configure button styles, background, footer text, and progress bar.
Save your Style Guide — it will apply to all future experiences.
⚠️ Don't skip this step. Style Guide setup often requires input from your design or brand team. Get it done early so it doesn't block your build later.
🤖 Step 2 — Meet the AI Builder Agent (Your Fastest Path to a First Draft)
Time: ~5–10 minutes
Before you build anything manually, try the AI Builder Agent. It can generate a complete experience — screens, copy, structure — from a simple text prompt. Think of it as your head start.
How to access it:
Look for the purple AI Agent icon in the top-right corner of the Experience Library.
Example prompts to try:
"Create a skincare quiz that asks about skin type and concerns, then recommends 3 products."
"Build a 5-question personality quiz about home decor style with 4 outcome types."
"Create a survey to collect feedback on our loyalty program."
What the AI gives you:
A full screen-by-screen experience structure
Draft copy for each screen
Suggested layout and flow
What you'll still do:
Swap in your brand's copy and images
Adjust logic and outcomes to match your product set
QA and refine before launch
💡 The agent doesn't replace your strategy. It gives you a head start. The more specific your prompt, the better the output.
🏗️ Step 3 — Build Your Experience
Time: Varies | Recommended: 60+ min/week
Whether you used the AI agent to get a draft or you're starting from scratch, here's how the build process works.
3a. Create a New Experience from Scratch
In the Builder tab, go to the Experience Library.
Click Start a New Experience.
Select your experience type (start with Standard if unsure then you can change it later).
Name your experience clearly.
Select your Style Guide.
Click Create.
You'll land in the Screen Library, where you can add and organize screens.
🎓 BlueU Course: Introduction to Building Experiences
3b. Add and Edit Screens
Use the Screen Library to add screens. Types include:
Layout — Intro/welcome screens
Questions — Multiple choice, image selectors, sliders
Forms — Lead capture (name, email, zip)
Outcomes & Products — Results and recommendations
Gamification — Interactive elements
Recommended first experience structure (5–7 screens):
Intro screen (1) — What's the value? What will the user do?
Question screens (3–4) — Ask what you need to know
Lead capture (1) — Optional but highly recommended
Outcome/results screen (1) — What does the user get?
💡 Make the value exchange clear from screen 1. Tell users what they'll get for completing the experience (a personalized recommendation, a discount, exclusive content, etc.).
To edit any screen:
Click an element to open edit options in the left panel
Add/remove text, images, buttons, and video
Adjust layout with drag-and-drop containers
Use the built-in AI Copy Assistant to write or refine copy
3c. Understand Screen Structure
This is the most important concept to understand before you build.
Every screen in XP has two layers:
Layer | What it does | What goes here |
Primary Background | Where all content lives | Text, buttons, forms, images, logos |
Secondary Background | Visual layer only | Background imagery |
Key rule:
If a user needs to read it, click it, or interact with it → it goes in the Primary Background.
The Secondary Background is for visuals only — you can't add interactive elements there besides hotspots.
Two core screen setups:
Split Screen — Primary and Secondary each take ~50% of the screen. Great for image-rich experiences.
Full Screen — Secondary background spans the full screen; Primary sits on top. Best for content-focused experiences.
Layout options: Within each setup, you have layout options that control how the Primary and Secondary sections are oriented and sized relative to each other.
⚠️ Common mistake: Uploading images with text or logos in the Secondary Background. This creates accessibility issues and limits flexibility across screen sizes. Always put text in the Primary layer.
⚠️ Another common mistake: Designing only for desktop without checking mobile. Toggle between views in the editor — layouts adapt automatically but spacing and font sizes may need adjustment.
3d. Set Up Logic and Outcomes
Logic is how the platform connects a user's answers to personalized results.
Logic Type | Best for | How it works |
Matching | Small product sets (<25), fixed recommendations | Point-based — answers assign points, highest-score outcome wins |
Scoring | Trivia/knowledge quizzes | Correct/incorrect answers determine outcome |
Dynamic Product Feed (DPF) | Large catalogs (25+ products), frequently updated | CSV-based filtering — answers act like product filters |
💡 Start with Matching or Scoring for your first build. DPF is powerful but requires more lead time and planning. Your team can help you determine the right fit.
To set up Matching outcomes:
Define your outcomes (e.g., product recommendations or persona types)
Design your outcome screen
Assign point values to each answer
The outcome with the most points is shown to the user
3e. Map Attributes
Attributes are how you capture and store what users tell you. Every question-answer pair should be mapped to an attribute so the data is collected and available in reporting.
💡 Think of attributes as the "fields" in your database. If someone answers "Dry" to a skin type question, that answer should map to a skin_type attribute with a value of dry.
3f. Start the Data Connection Conversation
⚠️You don't need this done to finish your build, but don't wait until launch week to start it.
The data your customers share through your experience — their preferences, quiz answers, contact info — is only as valuable as what you do with it. Data connections are how that information flows automatically into the platforms your team already uses: your ESP, CRM, CDP, or analytics tools.
This is what turns a quiz into a first-party data engine.
Why it matters: Without a connection, results live inside XP — useful, but siloed. With one, every response flows into your marketing stack to power segmentation, personalization, and follow-up campaigns automatically.
Who owns this? If you're the marketer building the experience, data connections are likely not yours to configure alone. Most integrations require a technical contact — someone with credentials and access to your ESP, CRM, or data platform.
Your job right now, while you're still building: Identify that person and loop them in. The earlier this conversation starts, the less likely it is to delay your launch.
What types of connections are available?
Connection Type | What it does | Examples |
Native Integrations | Automatically push user data (leads, attributes) to your platform in real time | Klaviyo, Salesforce, Braze, HubSpot, Attentive, Shopify, and 25+ others |
Tracking Tags / Pixels | Fire analytics and ad tracking events on specific experience screens | Google Tag Manager, GA4, Meta/Facebook, |
Batch File Transfer | Receive cumulative user data as a periodic file export | SFTP or compatible endpoint |
API / Webhook | Custom data routing for more complex use cases | Any compatible platform |
💡 Most teams start with one native integration (typically their ESP) and one pixel (typically GTM or Meta). That covers personalized follow-up email and ad optimization from day one.
What to do now vs. later
You (while building):
Identify which platforms need to receive experience data (ESP, CRM, CDP, etc.)
Confirm which attributes from your experience need to transfer — this should inform how you set up attribute mapping in Step 3e
Identify your technical contact and share this section with them
Flag any integrations that may require lead time
Your technical contact (before launch):
Review the relevant integration guide for your platform
Set up the integration in XP (many are self-service)
Confirm pixels are firing correctly on the right screens
Complete end-to-end testing with the XP team
⚠️ Timing note: Non-self-service integrations (API and Batch File Transfer) can take up to two weeks once all details are finalized. Starting this conversation during the build phase, not the week before launch, keeps you on track.
A note on pixels
Pixels are lightweight but placement matters. Each fires on a specific screen event (view, completion, lead capture) and sends that signal to your ad or analytics platform.
Common use cases:
Meta pixel — retarget users who started but didn't complete, or build lookalike audiences from users who completed the experience
Google Tag Manager and GA4 — target user engagement and send valuable data to Google Analytics.
💡 If your team already uses GA4 that's usually the fastest path — provides a direct way to send data on screen visits, responses, leads, and add-to-cart events.
👁️ Step 4 — Preview and QA
Time: ~20–30 minutes
Before you publish, walk through your experience the same way your customer will.
QA Checklist:
Preview on both mobile and desktop
Recommended to do a live test through the channels your launching on as well
Every screen has the correct copy and imagery
Logic routes users to the right outcomes
Redirect URL at the end works and goes to the right page
No empty pathways or dead ends in the Builder Map
Outcome screen has the correct container for your logic type
Lead capture fields are correct (required fields, legal text if applicable)
Attribute mapping is complete
Pixels are firing correctly on the right screens (if applicable)
Data connection has been tested end-to-end with your tech contact (if applicable)
Go to Builder Map → Preview and click through the full experience.
💡 Preview Links:
Preview links don't collect data so you can run through as many times as you'd like without having to worry about impacting the experience analytics
If you are sharing with team members who don't have access to the platform then use the carrot icon dropdown to select full-screen preview. This will give them access to the preview link.
🚀 Step 5 — Publish and Launch
These are two separate steps — don't confuse them.
Publishing pushes your live version to the launch link. It does not make your experience visible to customers yet. You only need to generate launch links once — republishing updates the same link.
Launching is how customers actually find your experience. You own the actual launch of the experience.
To launch:
From the Launch page, generate the appropriate link for your channel:
Web
Email
Social
Paid media
QR code
Generate a unique link for each channel — this enables accurate analytics per source.
Copy your launch link from the platform and append UTM parameters manually before placing it in your distribution channel
Drop your links into your distribution channels and go live.
📊 Step 6 — Check Your Results
Once you're live, head to the Reporting tab to track performance. Key metrics to monitor:
Views — How many people saw the experience?
Completions / Completion Rate — Did they finish?
Leads captured — How many submitted their info?
Outcome distribution — Which results are users landing on?
💡 Give it time. Most experiences need at least a few hundred views to identify meaningful trends. Once you have data, use it to iterate — adjust copy, test a different intro screen, or refine your outcome logic.
🆘 Getting Help
Need | Where to go |
Quick platform question | AI Help Bot — bottom-right corner of the platform (available 24/7) |
Troubleshooting or how-to | Knowledge Base → — search by keyword (e.g., "embed experience," "outcome screen") |
Technical issues | Support team — platform behavior, integrations, mobile display issues |
Strategy, KPIs, best practices | Your CSM — goals, benchmarks, what's working in your industry |
📋 Your Onboarding Checklist at a Glance
Phase | Task | Done? |
Before you build | Define use case, audience, channel, KPI | ☐ |
Brand setup | Upload logo, fonts, colors to Style Guide | ☐ |
Build | Generate first draft with AI Builder Agent | ☐ |
Build | Refine screens, copy, and imagery | ☐ |
Build | Set up outcomes and logic | ☐ |
Build | Map attributes | ☐ |
Build | Identify integration needs + loop in tech contact | ☐ |
Build | Begin data connection setup (allow up to 2 weeks if non-self-service) | ☐ |
QA | Preview on mobile and desktop | ☐ |
QA | Walk the full experience end-to-end | ☐ |
QA | Confirm pixels firing + data connection tested | ☐ |
Launch | Publish experience | ☐ |
Launch | Generate launch links with UTMs | ☐ |
Launch | Go live in your channels | ☐ |
Post-launch | Check analytics after first week | ☐ |













