Embed Customization

Brand your embedded Formula Bot widget with custom logos, accent and background colors, greeting text, and visibility toggles for a tailored experience.

Make your embedded chat widget match your brand with custom colors, logos, and visibility settings.

Accessing Customization Settings

  1. Go to Embeddings in the sidebar
  2. Select an embed from your list
  3. Expand the Settings accordion on the left panel

Visibility Settings

Control what features are visible to users in your embed.

Available Toggles

SettingDescription
Hide Add Data buttonRemoves the button for adding data files
Hide My Data sectionHides the user's uploaded files section
Hide Customize dropdownRemoves the customization options
Collapse SidebarStarts the chat with sidebar minimized
Hide Code BlocksHides code snippets in AI responses

Tools, Playbooks, Formula Generator, and PDF to Excel are always hidden in embeds regardless of these settings.

Common Configurations

Minimal Interface - For simple Q&A use cases:

  • Enable all "Hide" options
  • Collapse Sidebar

Data Analysis Focus - When users need to work with files:

  • Keep My Data visible
  • Keep Add Data visible
  • Collapse Sidebar for more space

Text Customization

Custom Greeting

Replace the default "Good afternoon, [Name]" greeting with your own message.

  1. Expand the Customization section
  2. Enter your greeting in the Custom Greeting field
  3. Changes save automatically

Example: "Welcome to Acme Analytics"

Placeholder Text

Customize the input field placeholder text.

  1. In the Customization section
  2. Enter text in the Placeholder Text field
  3. Changes save automatically

Example: "Ask about your sales data..."

Customization features vary by plan. All paid plans can set a custom greeting and placeholder text. Max and Enterprise plans can set custom colors. Enterprise plans can upload a custom logo and remove Formula Bot branding.

Logo Upload

Add your company logo to the embed. Requires Enterprise plan.

Requirements

  • File size: Maximum 2MB
  • Formats: PNG, SVG, JPG, GIF
  • Display size: 64px height, up to 280px width

Uploading a Logo

  1. Expand the Customization section
  2. Click Upload Logo or drag a file to the upload area
  3. Your logo appears in the preview
  4. The logo displays in the embed's sidebar header

Removing a Logo

Click the X button on the logo preview to remove it.

For best results, use a transparent PNG or SVG. Logos are displayed against your chosen background color.

Color Configuration

Match your embed to your brand colors. Requires Max or Enterprise plan.

Accent Color

The accent color is used for:

  • Buttons
  • Links
  • Selected states
  • Interactive elements

Default: #da7756 (coral orange)

Background Color

The background color affects:

  • Main chat area background
  • Sidebar background
  • Card backgrounds

Default: #f5f3ef (warm off-white)

Setting Colors

  1. Expand the Colors section
  2. Click the color picker or enter a hex code
  3. Changes preview immediately
  4. Settings save automatically

Color Tips

  • Ensure sufficient contrast between accent and background colors
  • Test readability with both light and dark backgrounds
  • The embed automatically adjusts text colors based on background brightness

Live Preview

As you make changes, the Preview panel on the right shows how your embed will look:

  • Home View: Shows the initial state with greeting and input
  • Chat View: Shows a sample conversation with AI response

Toggle between views using the buttons at the top of the preview.

The preview updates in real-time as you change settings. Use it to fine-tune your branding before deploying.

Next Steps