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¶

Rose adds a section with question buttons to your page
When visitors click a question, the chat widget opens with that question
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.

Creating a Section¶

Click + Add Section
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)
The Embed code appears automatically — copy it and add it to your website HTML
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.

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¶

To completely hide AI Sections on mobile devices, contact your Rose account manager to enable the disableOnMobile option.

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¶

Open your website in the browser
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
Type the following and press Enter:
```
window.RoseSections.preview()
```
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¶

Create your AI sections in the Rose dashboard and leave them disabled
Add the embed code to your website (e.g., <div data-rose-section="my-section"></div>)
Visit your website and use window.RoseSections.preview() to check that sections render correctly
Iterate on questions, styling, and placement in the dashboard
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 need help with site-level configuration (like hiding on mobile) or have questions, contact your Rose account manager.