Customization Options

InsightEmbed offers extensive customization options to ensure the widget integrates seamlessly with your website's design and meets your specific needs. This guide covers all the available customization options.

Accessing Customization Settings

1. Log in to your InsightEmbed dashboard at app.insightembed.com
2. Navigate to the "Widget" section
3. Click on "Customization"
4. You'll see various categories of customization options

Visual Customization

Theme Colors

You can customize the widget's color scheme to match your website's branding:

• Primary Color: The main color used for buttons and highlights
• Secondary Color: Used for secondary elements and accents
• Text Color: The color of text within the widget
• Background Color: The widget's background color
• Icon Color: The color of icons in the widget

Typography

Customize the text appearance within the widget:

• Font Family: Choose from a selection of web-safe fonts or specify your own
• Font Size: Adjust the base font size for the widget
• Font Weight: Set the weight (boldness) of the text
• Line Height: Adjust the spacing between lines of text

Widget Size

Configure the dimensions of the widget:

• Width: Set the width of the expanded widget
• Height: Set the maximum height of the widget
• Icon Size: Adjust the size of the widget icon when collapsed

Functional Customization

Analysis Options

Configure which analysis types are available to visitors:

• Enable/Disable Analysis Types: Choose which pre-configured analyses to offer
• Custom Analyses: Create and manage custom analysis types
• Default Analysis: Set which analysis is selected by default

Prompt Templates

Customize the prompts used for different analysis types:

1. Select an analysis type to customize
2. Edit the prompt template
3. Use variables like to reference the content being analyzed
4. Add context about your website using

Context Settings

Provide context about your website to improve analysis relevance:

• Website Purpose: Describe what your website is about
• Content Type: Specify the type of content on your website
• Audience: Describe your target audience
• Tone: Set the preferred tone for analyses (formal, casual, technical, etc.)

Behavioral Customization

Trigger Settings

Configure how the widget is activated:

• Text Selection: Enable/disable activation when text is selected
• Manual Activation: Require clicking the widget icon to activate
• Keyboard Shortcut: Set a keyboard shortcut to open the widget

Position Settings

Determine where the widget appears on your website:

• Widget Position: Choose where the collapsed widget icon appears (bottom-right, bottom-left, etc.)
• Analysis Position: Set where analyses appear relative to selected content
• Mobile Position: Configure different positions for mobile devices

Visibility Settings

Control when and where the widget is visible:

• Page Rules: Show/hide the widget on specific pages
• Element Rules: Prevent the widget from analyzing specific elements
• User Rules: Configure visibility based on user interactions

Advanced Customization

White Labeling (Starter & Pro Plans)

Remove InsightEmbed branding from the widget:

• Custom Logo: Upload your own logo to replace the InsightEmbed logo
• Custom Widget Name: Change the name displayed in the widget
• Remove Branding: Remove all references to InsightEmbed

Custom CSS (Pro Plan)

Apply custom CSS to the widget for complete control over its appearance:

1. Navigate to "Advanced Customization" > "Custom CSS"
2. Enter your CSS code in the provided editor
3. Use the provided class names to target specific elements
4. Preview your changes in real-time

JavaScript Callbacks (Pro Plan)

Set up custom JavaScript callbacks to integrate the widget with your website:

• onOpen: Triggered when the widget opens
• onClose: Triggered when the widget closes
• onAnalysisStart: Triggered when an analysis begins
• onAnalysisComplete: Triggered when an analysis is completed

Saving and Publishing Changes

After making customizations:

1. Click "Save Changes" to store your configuration
2. Use the "Preview" button to see how your changes look
3. Click "Publish" to make your changes live on your website

Best Practices

• Maintain consistency with your website's design language
• Test your customizations across different devices and browsers
• Consider accessibility when choosing colors and fonts
• Use the preview mode to test changes before publishing
• Start with subtle customizations and refine based on user feedback

Troubleshooting

If your customizations aren't appearing correctly:

• Clear your browser cache to see the latest changes
• Check for conflicts with your website's CSS
• Verify that your changes were published successfully
• Test in an incognito/private browsing window

For more help, refer to our Common Errors guide or contact our support team at support@insightembed.com.