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

Embedding AI Sections¶

AI Sections is included in the Rose widget. Simply add a container element where you want the section to appear:

<!-- 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>

Your Rose account manager will configure the questions and styling in our dashboard.

Custom Styling¶

You can customize the appearance by providing CSS to your Rose account manager. Here's the format:

CSS Format¶

/* 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-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, ask your Rose account manager to enable the disableOnMobile option.

Need Help?¶

Contact your Rose account manager with:

The CSS you'd like applied
The page URL where AI Sections should appear
The questions you want displayed

We'll configure everything for you.