AI Sections

AI Sections displays clickable question prompts on your website that open the Rose chat widget with a pre-filled question. This helps guide visitors toward relevant topics.

How It Works

1. Rose adds a section with question buttons to your page
2. When visitors click a question, the chat widget opens with that question
3. The AI responds immediately

Managing AI Sections

AI Sections are managed from the Rose dashboard. Log in at app.userose.ai and click AI Sections in the left sidebar under Website Agent.

Sections List

The main page shows all your AI sections in a table:

Column	Description
Section ID	Unique identifier used in the embed code
Title	The heading displayed above questions
Questions	Number of questions (and whether a search bar is included)
Layout	Stacked (vertical) or Inline (horizontal)
Status	Enabled or Disabled
Actions	Edit, Duplicate, or Delete the section

Click + Add Section to create a new section.

At the top of the page, you can also control two site-level settings:

• Enable — turns AI Sections on or off for the domain
• Mobile — decides whether AI Sections can appear on mobile devices for the domain

The mobile toggle is on by default.

Creating a Section

1. Click + Add Section
2. Enter a Section ID (slug) — this is the unique identifier used in the embed code. Use lowercase letters, numbers, hyphens, or underscores (e.g., pricing-faq, homepage-hero)
3. The Embed code appears automatically — copy it and add it to your website HTML
4. Toggle Enabled to make the section live

Naming your sections

Use descriptive IDs that indicate where the section appears or what topic it covers, like homepage-hero, features-faq, or pricing-questions.

Managing Questions

The Questions section lets you configure the title and question prompts displayed to visitors.

• Language tabs: English (required), French, German, Spanish, and Italian. The widget automatically shows questions in the visitor's browser language, falling back to English
• Title: The heading displayed above the question buttons (optional)
• Questions: The clickable prompts. Add or remove questions using the + and × buttons
• At least one English question is required (unless the search bar is enabled)

Search Bar

Toggle Show search bar to add an open-ended search input where visitors can type their own questions.

• Placeholder text: Customize the placeholder per language (default: "Ask a question...")
• Position: Configure where the search bar appears (top or bottom) in the Styling section

When the search bar is enabled, predefined questions become optional — the section can show only the search bar if you prefer.

Styling

The Styling section provides visual controls for customizing the appearance of your AI section:

Setting	Description	Default
Layout	Stacked (one question per line) or Inline (questions wrap horizontally)	Stacked
Search Bar Position	Where the search bar appears relative to questions	Bottom
Primary Color	Accent color for icons and highlights	#006967
Background Color	Section container background	Transparent
Button Background	Question button background color	#FFFFFF
Button Text Color	Text color inside question buttons	#1a1a1a
Title Color	Color of the section title	#003E3F
Gap	Space between question buttons	12px
Font Size	Button text font size	20px
Font Weight	Button text weight	400
Icon Size	Sparkle icon size in pixels	20
Arrow Size	Arrow icon size in pixels	24

Live Preview

As you edit questions, styling, or CSS, the Preview panel on the right side of the form updates in real time. Click the expand icon to see a larger preview.

Enabling and Disabling

Each section has an Enabled toggle. When disabled, the section won't appear on your website even if the embed code is present. The status is shown as a green "Enabled" or gray "Disabled" badge in the sections list.

This is useful for preparing sections before they go live, or temporarily hiding a section without removing the embed code from your site.

Duplicating and Deleting

• Duplicate: Click the copy icon in the list to create a copy of a section. The new section's ID is suffixed with -copy. Change the ID and adjust settings as needed.
• Delete: Click the trash icon and confirm. This cannot be undone.

Embedding AI Sections

AI Sections is included in the Rose widget. Configure your questions and styling in the Rose dashboard under AI Sections, then add the embed code to your website:

<!-- Option 1: Auto-discover specific sections by ID -->
<div data-rose-section="homepage-hero"></div>

<!-- Option 2: Load all sections for your domain -->
<div id="rose-ai-sections-container"></div>

Tip

The embed code for each section is displayed in the dashboard when you create or edit a section, with a copy button for convenience.

Framer

If your Framer site already loads the Rose widget, you can use a minimal Framer code component as the mount point for a specific AI section:

import * as React from "react"

export default function RoseAISection() {
    return <div data-rose-section="test-section" />
}

Place this code component inside a container with its height set to fit content. A stack works well, but any container is fine as long as it does not keep a fixed empty height when the AI section is hidden.

Set the code component itself to fit content for height as well. This prevents the component from leaving behind an empty box when the AI section is not visible.

If you want the AI section to fill the available width of its Framer container, you can style the mount point:

import * as React from "react"

export default function RoseAISection() {
    return <div data-rose-section="test-section" style={{ width: "100%" }} />
}

This is useful when you want the section to stretch to the width of the surrounding layout while keeping the integration minimal.

If you want to reuse the same component for multiple AI sections, you can pass the section ID as a prop and expose it in Framer with Property Controls:

import * as React from "react"
import { addPropertyControls, ControlType } from "framer"

export default function RoseAISection(props) {
    return <div data-rose-section={props.sectionId} />
}

RoseAISection.defaultProps = {
    sectionId: "test-section",
}

addPropertyControls(RoseAISection, {
    sectionId: {
        type: ControlType.String,
        title: "Section ID",
    },
})

This lets you use a single Framer code component multiple times across your site, with a different section ID for each instance.

Custom CSS

For advanced styling beyond the color pickers and sizing controls, you can write custom CSS in the Custom CSS section of the form. The CSS editor validates your input in real time and shows errors if the syntax is invalid.

CSS Format

Use the following CSS classes to target specific parts of the section:

/* Section container - background, padding, borders */
.ai-sections-container {
  background: #your-color;
  border-radius: 16px;
}

/* Title above the questions */
.ai-sections-title {
  color: #your-color;
  font-size: 24px;
}

/* Question buttons */
.ai-sections-button {
  background: #your-color;
  border-radius: 9999px;
}

/* Button text */
.ai-sections-button-text {
  color: #your-color;
  font-size: 18px;
}

/* Sparkle icon color */
.ai-sections-button {
  --ai-sections-sparkle-color: #your-color;
}

/* Arrow icon */
.ai-sections-arrow {
  opacity: 0.6;
}

Example: Dark Theme

.ai-sections-container {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 20px;
}

.ai-sections-title {
  color: #e0fc63;
  font-size: 28px;
}

.ai-sections-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.ai-sections-button-text {
  color: #ffffff;
  font-size: 20px;
}

.ai-sections-button {
  --ai-sections-sparkle-color: #e0fc63;
}

Example: Brand Colors

.ai-sections-container {
  background: #f0f4ff;
}

.ai-sections-title {
  color: #0A42C3;
}

.ai-sections-button {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ai-sections-button-text {
  color: #333333;
}

.ai-sections-button {
  --ai-sections-sparkle-color: #0A42C3;
}

Available CSS Classes

Class	What it styles
.ai-sections-container	Main container (background, padding, borders)
.ai-sections-content	Inner content wrapper (padding)
.ai-sections-title	Title text above questions
.ai-sections-button	Question button (background, border, shadow)
.ai-sections-button-text	Button text (color, font-size, font-weight)
.ai-sections-icon	Sparkle icon
.ai-sections-arrow	Arrow icon on the right
.ai-sections-search-bar	Search input container (same styling as buttons)
.ai-sections-search-input	Search input text (color, font-size)

CSS Variables

For the sparkle icon color, use a CSS variable:

.ai-sections-button {
  --ai-sections-sparkle-color: #your-brand-color;
}

Responsive Behavior

AI Sections is fully responsive out of the box. The component automatically adjusts for smaller screens:

Viewport	Adjustments
≤768px (tablet)	Reduced padding, font size 16px
≤480px (phone)	Compact padding, font size 14px

Button text wraps naturally on narrow screens.

Custom Mobile Styling

If you set fixed font sizes in your CSS, add responsive overrides to ensure they work on mobile:

/* Desktop styles */
.ai-sections-button-text {
  font-size: 20px !important;
}

/* Tablet and smaller */
@media (max-width: 768px) {
  .ai-sections-button-text {
    font-size: 16px !important;
  }
  .ai-sections-search-input {
    font-size: 16px !important;
  }
}

/* Phone */
@media (max-width: 480px) {
  .ai-sections-button-text {
    font-size: 14px !important;
  }
  .ai-sections-search-input {
    font-size: 14px !important;
  }
}

Hiding on Mobile

You can hide AI Sections on mobile directly from the AI Sections page in the dashboard using the Mobile toggle in the header.

• Mobile on: AI Sections can render on mobile devices
• Mobile off: all AI Sections are hidden on mobile for the domain

This site-level toggle is on by default.

If you need finer control, individual sections can still use their own disableOnMobile styling option.

Hiding the Section When the Widget Is Hidden

When the Rose widget bar is hidden (e.g., on certain pages or for certain visitors), the AI section collapses automatically. However, the wrapper element on your page remains visible, potentially leaving empty space.

To solve this, wrap the section container in a hidden element:

<div style="display: none">
  <div data-rose-section="faq"></div>
</div>

Then enable the "Unhide parent container" toggle in the section's Styling settings in the Rose dashboard. When enabled:

• The hidden wrapper is automatically shown when the widget is active
• The wrapper is re-hidden when the widget becomes inactive
• Any CSS hiding method works: display: none, visibility: hidden, opacity: 0, hidden attribute, or aria-hidden="true"

Previewing Disabled Sections

You can preview disabled AI sections on your live website before enabling them for visitors. Preview mode only affects your current browser tab — other visitors will not see disabled sections. This lets you verify that everything looks correct without affecting the public experience.

How to Preview

1. Open your website in the browser
2. Open the browser developer console:
   • Chrome/Edge: Press F12 or right-click → Inspect → Console tab
   • Firefox: Press F12 → Console tab
   • Safari: Enable developer tools in Preferences → Advanced, then press Cmd+Option+C

3. Type the following and press Enter:

   window.RoseSections.preview()
   

4. All AI sections will appear, including disabled ones

Exiting Preview

To hide disabled sections again, either:

• Type window.RoseSections.exitPreview() in the console
• Refresh the page

Note

Preview mode runs entirely in your browser. It does not change any settings or make disabled sections visible to other visitors.

Typical Workflow

1. Create your AI sections in the Rose dashboard and leave them disabled
2. Add the embed code to your website (e.g., <div data-rose-section="my-section"></div>)
3. Visit your website and use window.RoseSections.preview() to check that sections render correctly
4. Iterate on questions, styling, and placement in the dashboard
5. When satisfied, enable the sections in the dashboard to make them visible to all visitors

Need Help?

Most AI Sections settings can be managed directly from the Rose dashboard. If you have questions or need help with more advanced setup, contact your Rose account manager.