Documentation

Customizing Widget Appearance

TipPanel allows you to fully customize the appearance of your widget to match your website's design and branding. This guide covers all the appearance customization options available.

Table of Contents
  1. Appearance Overview
  2. Accessing the Appearance Editor
  3. Theme Settings
  4. Layout Options
  5. Custom Text
  6. Using the Preview Panel
  7. Appearance Tips and Best Practices

Appearance Overview

The widget appearance editor allows you to customize various aspects of your widget:

Theme Settings

Customize the visual style of your widget, including colors, fonts, borders, and shadows.

Layout Options

Configure the position, size, and behavior of your widget on your website.

Custom Text

Edit all text elements in the widget, including headings, buttons, and messages.

Preview

See how your changes look in real-time with the interactive preview panel.

Note: The available customization options may vary depending on your subscription plan and the widget type (Floating or Inline).

Accessing the Appearance Editor

To access the widget appearance editor:

  1. Navigate to the Campaigns page in your dashboard
  2. Find the campaign whose widget you want to customize
  3. Click the Appearance button for that campaign

The appearance editor has three main tabs:

  • Theme: For customizing colors, fonts, and visual style
  • Layout: For configuring position, size, and behavior
  • Custom Text: For editing all text elements in the widget

Each tab contains various settings that you can adjust to customize your widget. The preview panel on the right shows how your changes look in real-time.

Theme Settings

The Theme tab allows you to customize the visual style of your widget, including colors, fonts, borders, and shadows.

Colors

You can customize the following color settings:

Setting Description Default
Primary Color The main color used for buttons, links, and accents #007bff
Secondary Color Used for secondary elements and hover states #6c757d
Background Color The background color of the widget #ffffff
Text Color The color of the main text #212529
Button Text Color The color of text on buttons #ffffff

To change a color:

  1. Click on the color picker for the setting you want to change
  2. Select a color from the color picker, or enter a hex code
  3. The preview will update in real-time to show your changes
Tip: For the best results, use colors that match your website's color scheme. You can use your website's primary and secondary colors for a consistent look.

Fonts

You can customize the following font settings:

Setting Description Default
Font Family The main font used throughout the widget Arial, sans-serif
Heading Font Size The size of heading text 18px
Body Font Size The size of body text 14px
Button Font Size The size of text on buttons 14px

To change a font setting:

  1. Select a font family from the dropdown menu, or enter a custom font stack
  2. Adjust the font size sliders for headings, body text, and buttons
  3. The preview will update in real-time to show your changes
Note: For custom fonts, make sure the font is available on your website or use web-safe fonts that are widely available across different devices and browsers.

Borders and Shadows

You can customize the following border and shadow settings:

Setting Description Default
Border Radius The roundness of corners on the widget and buttons 4px
Border Width The width of borders around the widget 1px
Border Color The color of borders around the widget #dee2e6
Shadow The shadow effect around the widget Medium

To change border and shadow settings:

  1. Adjust the sliders for border radius and width
  2. Select a border color using the color picker
  3. Choose a shadow option from the dropdown (None, Light, Medium, Heavy)
  4. The preview will update in real-time to show your changes

Layout Options

The Layout tab allows you to configure the position, size, and behavior of your widget on your website.

Widget Position

For Floating widgets, you can set the position on the screen:

Horizontal Position
  • Left: Widget appears on the left side of the screen
  • Right: Widget appears on the right side of the screen
Vertical Position
  • Top: Widget appears at the top of the screen
  • Bottom: Widget appears at the bottom of the screen

You can also set the distance from the edges of the screen using the margin settings.

For Inline widgets, the position is determined by where you place the embed code on your website, so there are no position settings in the appearance editor.

Widget Size

You can customize the size of your widget:

Setting Description Default
Widget Width The width of the expanded widget (Floating) or the inline widget 350px
Widget Height The height of the expanded widget (Floating) or the inline widget Auto
Button Size The size of the floating button (Floating widgets only) Medium (50px)

To change size settings:

  1. Adjust the sliders for widget width and height
  2. Select a button size from the dropdown (Small, Medium, Large)
  3. The preview will update in real-time to show your changes
Important: For mobile devices, the widget will automatically adjust to fit the screen size, regardless of the width setting.

Widget Behavior

You can customize how the widget behaves:

Setting Description Default
Auto Open Automatically open the widget after a delay (Floating widgets only) Off
Auto Open Delay The delay before automatically opening the widget (in seconds) 5 seconds
Animation The animation effect when opening/closing the widget Fade
Animation Speed The speed of the animation effect 300ms

To change behavior settings:

  1. Toggle the Auto Open switch on or off
  2. Adjust the Auto Open Delay slider if Auto Open is enabled
  3. Select an animation effect from the dropdown (None, Fade, Slide, Scale)
  4. Adjust the Animation Speed slider
  5. The preview will update in real-time to show your changes
Note: The Auto Open feature is only available for Floating widgets and is useful for drawing attention to your widget when a visitor first arrives on your website.

Custom Text

The Custom Text tab allows you to edit all text elements in the widget, including headings, buttons, and messages.

Text Elements

You can customize the following text elements:

Element Description Default
Widget Title The main heading of the widget Support with a Tip
Widget Subtitle The secondary heading or description Your support helps me create more content
Message Placeholder The placeholder text in the message input field Write a message...
Submit Button The text on the submit button Send Tip
Cancel Button The text on the cancel button Cancel
Success Message The message shown after a successful payment Thank you for your support!
Error Message The message shown if an error occurs Something went wrong. Please try again.

To change text elements:

  1. Enter your custom text in the input fields for each element
  2. The preview will update in real-time to show your changes
Tip: Use clear and concise text that matches your brand voice. Personalize the messages to create a connection with your visitors.

Text Translation

If you have a Premium or Lifetime plan, you can use the AI Translation feature to translate all text elements to different languages:

  1. Click the "Translate with AI" button at the top of the Custom Text tab
  2. Select the target language from the dropdown menu
  3. Click "Translate" to translate all text elements to the selected language
  4. Review the translations and make any necessary adjustments
  5. Click "Save" to apply the translations
Note: The AI Translation feature requires an OpenAI API key, which you can set up in your profile settings. This feature is only available on Premium and Lifetime plans.

Using the Preview Panel

The preview panel on the right side of the appearance editor shows how your widget will look with the current settings. It updates in real-time as you make changes.

Preview Controls
  • Device Toggle: Switch between desktop and mobile views
  • State Toggle: For Floating widgets, switch between collapsed (button) and expanded states
  • Step Toggle: Switch between different steps in the widget flow (initial, message, payment, success)
Preview Limitations
  • The preview is a simulation and may not exactly match how the widget appears on your website
  • Some interactive elements like animations may not be fully represented in the preview
  • For the most accurate view, use the "Test Widget" feature after saving your changes

To use the preview panel effectively:

  1. Make changes to your widget settings in the editor
  2. Check the preview to see how the changes look
  3. Use the preview controls to view different states and device sizes
  4. Continue making adjustments until you're satisfied with the appearance
  5. Click "Save" to apply your changes

Appearance Tips and Best Practices

Color and Branding
  • Use colors that match your website's color scheme for a cohesive look
  • Ensure sufficient contrast between text and background colors for readability
  • Use your primary brand color for buttons and accents
  • Consider using a white or light background for the widget body for better readability
Layout and Positioning
  • For Floating widgets, position them where they're visible but not intrusive
  • Bottom-right corner is often a good default position for Floating widgets
  • For Inline widgets, ensure they have enough space and don't crowd other content
  • Keep the widget size reasonable - not too small to be usable, not too large to be overwhelming
Text and Messaging
  • Keep text concise and clear - avoid long paragraphs
  • Use a friendly, conversational tone that matches your brand voice
  • Personalize messages to create a connection with your visitors
  • Consider your audience when choosing language and terminology
Testing and Refinement
  • Test your widget on different devices and browsers
  • Get feedback from others on the appearance and usability
  • Make incremental changes rather than completely redesigning frequently
  • Monitor analytics to see how changes affect engagement and conversion
Pro Tip: The most effective widgets are those that blend seamlessly with your website's design while still being noticeable enough to attract attention. Aim for a balance between standing out and fitting in.
Campaigns Next: Analytics