Design

Match Sagent's appearance to your brand and website.

The Design section controls Sagent's visible interface on your website. Use it to match your brand without reducing readability or usability.

Configure the standard settings first. Review every change in preview on mobile and desktop before publishing.

Settings

Icon and color

• Chat Icon appears as Sagent's visual identifier. Use a clear brand-approved image.

• Chat Background Image appears behind the chat interface. Use an image that preserves text contrast.

• Icon Background Color fills the space behind the chat icon. Use it with transparent icons or remove it when unnecessary.

• Icon Border Radius, Icon Width, and Icon Height shape and size the icon. Keep the icon large enough to recognize and tap.

• Primary Color appears on key interactive elements, highlights, and shopper chat bubbles.

• Primary Text Color appears on primary-color surfaces. Choose a color with clear contrast.

• Selected Buttons Background appears after shoppers select a suggestion or option. It must remain visibly distinct from unselected buttons.

Set the icon and primary colors first. Check icon legibility, button states, and text contrast in the deployed context.

Product cards

• Product Image Background Color appears behind product images in recommendation cards. Match it to your image treatment.

• Product Image Padding adds whitespace around images in those cards. Increase it for tightly cropped imagery.

These settings affect recommendation cards only. They do not change your product images or catalog data.

Chat layout

• Chat Width and Chat Height set the visible chat panel dimensions.

• Right Position and Bottom Position set the panel's offset from the viewport edges.

• Chat Border Radius rounds the chat panel corners.

• Buttons Border Radius rounds buttons, suggestions, and other button surfaces.

• Z-Index controls whether Sagent sits above or below other website elements.

Use the defaults unless the website layout requires a change. Test narrow screens, sticky elements, navigation, consent banners, and checkout flows. Do not position Sagent where it blocks required page controls.

Landing Aurora Colors

Landing Aurora Colors control the animated gradient on Sagent's landing view. Shoppers see it before they begin a conversation.

• Generation Method controls how the landing gradient is created. Select Manual to define the colors yourself.

• Gradient Type controls the gradient direction and shape.

• Angle controls the direction of a linear gradient.

• Color Stops set each gradient color and its position. Add or remove stops to refine the transition.

Keep the animation subtle and readable. Check that landing titles, subtitles, and icons remain clear against every gradient state.

Custom CSS

Custom CSS provides advanced visual overrides when standard controls cannot meet a requirement. It can affect any visible Sagent surface.

Use it only for an approved, specific design requirement. Keep overrides minimal and test every affected state. Recheck custom styling after Sagent updates or theme changes.

Use the following examples when the prefilled selectors are unavailable. Adjust the color values for your brand.

/* Loading-question gradient */
.question-container .question-gradient,
.results-summary .results-title .results-title-markup {
  background-image: linear-gradient(
    135deg,
    #000000 0%,
    #000000 34%,
    #e2e1dc 37%,
    #ffffff 40%,
    #e2e1dc 45%,
    #ffffff 50%,
    #e2e1dc 55%,
    #ffffff 60%,
    #e2e1dc 66%,
    transparent 75%,
    transparent 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Animated chat-input border */
.chat-input.animated-border::before {
  background-image: linear-gradient(
    135deg,
    transparent 0%,
    transparent 20%,
    #e2e1dc 34%,
    #ffffff 40%,
    #e2e1dc 45%,
    #ffffff 50%,
    #e2e1dc 55%,
    #ffffff 60%,
    #e2e1dc 66%,
    transparent 78%,
    transparent 100%
  ) !important;
}

/* Chat background */
.expanded.expended-chat-wrapper {
  background-color: #e2e1dc;
}

/* Reset icon */
.header-icons-wrapper .icon-btn.reset svg {
  fill: black !important;
}

/* Privacy statement */
.privacy-toggle,
#privacy-statement-content a {
  color: #0a0a0a !important;
}

/* Recommendation summary */
.recommendation-summary .summary-title {
  color: #0a0a0a !important;
}

/* Rating stars */
.product-rating {
  --star-fill: #0a0a0a !important;
}

/* Result benefit checkmarks */
.benefits-section .benefit-item .benefit-icon.advantage {
  background: linear-gradient(135deg, #75827a, #ddd8cf) !important;
}

Without brand colors and an icon, Sagent uses Crobox default styling. Update this tab before demos or customer-facing launches.

Frequently asked questions

Which settings should I change first?

Set the chat icon, primary color, and primary text color first. Test the result on your website before changing layout settings.

When should I use Advanced styling?

Use it only when standard design settings cannot meet a specific brand requirement. Test each override after saving.