Widget Branding

This document explains how to customize the branding elements of the InsightEmbed widget to align with your website's identity.

Branding Overview

InsightEmbed allows you to customize various branding elements to create a seamless integration with your website. You can modify the widget's logo, labels, and attribution to create a consistent brand experience for your users.

Configuration Methods

You can configure the widget's branding through:

1. Management Portal: Use the branding settings in the Management Portal
2. API: Set branding properties programmatically via the Widget Configuration API
3. Initialization Options: Pass branding settings when initializing the widget

Logo Customization

Widget Button Logo

Property	Description	Default
logoUrl	URL to your custom logo image	InsightEmbed logo
logoWidth	Width of the logo in pixels	24
logoHeight	Height of the logo in pixels	24
logoAlt	Alt text for the logo	"InsightEmbed"

Panel Header Logo

Property	Description	Default
headerLogoUrl	URL to your custom header logo	Same as button logo
headerLogoWidth	Width of the header logo in pixels	100
headerLogoHeight	Height of the header logo in pixels	30

Text Customization

Widget Labels

Property	Description	Default
buttonLabel	Text shown on the widget button	"Analyze"
panelTitle	Title shown in the widget panel header	"Content Analysis"
placeholderText	Placeholder text in the analysis input	"Select text or enter content to analyze..."
analyzeButtonText	Text for the analyze button	"Analyze"

Custom Messages

Property	Description	Default
welcomeMessage	Message shown when the widget is first opened	"Welcome to InsightEmbed! Select text on this page or enter content to analyze."
emptyStateMessage	Message shown when no analysis has been performed	"No analysis yet. Select text or enter content to get started."
loadingMessage	Message shown during analysis	"Analyzing your content..."

White Labeling

Note: White labeling is available on Starter and Pro plans only.

Attribution Control

Property	Description	Default
showAttribution	Whether to show "Powered by InsightEmbed"	true (Free plan), false (Starter/Pro plans)
attributionText	Custom attribution text	"Powered by InsightEmbed"

Custom Domain

Pro plan users can set up a custom subdomain for API requests:

1. Add a CNAME record in your DNS settings pointing to api.insightembed.com
2. Configure your custom domain in the Management Portal
3. Update your widget configuration to use the custom domain

InsightEmbed.init({
  apiKey: 'YOUR_WIDGET_API_KEY',
  apiEndpoint: 'https://api.yourdomain.com/v1'
});

Example Configuration

Using the Management Portal

Navigate to Widget Settings > Branding in the Management Portal to access the branding settings.

Using JavaScript Initialization

InsightEmbed.init({
  apiKey: 'YOUR_WIDGET_API_KEY',
  branding: {
    logoUrl: 'https://yourdomain.com/logo.png',
    logoWidth: 28,
    logoHeight: 28,
    headerLogoUrl: 'https://yourdomain.com/header-logo.png',
    headerLogoWidth: 120,
    buttonLabel: 'Insights',
    panelTitle: 'Content Insights',
    welcomeMessage: 'Welcome to our content analysis tool!',
    showAttribution: false
  }
});

Using the API

curl -X PATCH https://api.insightembed.com/v1/widget/configuration \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "branding": {
      "logoUrl": "https://yourdomain.com/logo.png",
      "logoWidth": 28,
      "logoHeight": 28,
      "headerLogoUrl": "https://yourdomain.com/header-logo.png",
      "headerLogoWidth": 120,
      "buttonLabel": "Insights",
      "panelTitle": "Content Insights",
      "welcomeMessage": "Welcome to our content analysis tool!",
      "showAttribution": false
    }
  }'

Advanced Branding

Custom Button Icon

You can use a custom SVG icon instead of an image logo:

InsightEmbed.init({
  apiKey: 'YOUR_WIDGET_API_KEY',
  branding: {
    customIcon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
  }
});

Custom CSS Classes

You can add custom CSS classes to widget elements for more advanced styling:

InsightEmbed.init({
  apiKey: 'YOUR_WIDGET_API_KEY',
  branding: {
    customClasses: {
      button: 'my-custom-button-class',
      panel: 'my-custom-panel-class',
      header: 'my-custom-header-class'
    }
  }
});

Best Practices

1. Maintain Brand Consistency: Use logos and colors that match your website's branding

2. Optimize Logo Files: Use optimized SVG or PNG files for logos to ensure fast loading

3. Clear Labeling: Use clear, descriptive labels that communicate the widget's purpose

4. Test Across Devices: Ensure your branding looks good on all device types and sizes

5. Consider White Labeling: For a seamless integration, consider upgrading to a plan that supports white labeling

Logo Requirements

• File Formats: SVG (preferred), PNG, or JPEG
• Maximum File Size: 100KB
• Recommended Dimensions:
  • Button logo: 24x24px to 32x32px
  • Header logo: 100x30px to 150x40px
• Background: Transparent background recommended

Localization

You can customize widget text for different languages. See the Localization Guide for more information.