Online Forms & Surveys Builder - Create Forms in Minutes

Widget styling allows you to customize the visual appearance of your trigger buttons and icons to match your brand identity. From choosing the right icon to setting custom colors and sizes, you have complete control over how your widget looks to users.

All styling options are configured through simple data attributes, making it easy to maintain consistent branding across all your widgets.

Visual Configuration Interface

You don't need to write styling code manually! When you create or edit a survey/form, click the Preview button to access our visual configuration interface. Customize colors, icons, and styles using color pickers and dropdowns, and the code will be generated automatically for you.

✨ Try it:Dashboard → Your Survey/Form → Preview → Configure Widget Settings

Icon customization

Icons are used in both icon-only triggers and as optional additions to button triggers. Choose from pre-defined icon types or create your own custom icons.

Icon types

Select from 9 pre-designed icon types that cover common widget use cases.

💬

Chat

data-icon-type="chat"

Perfect for live chat widgets or messaging features

📋

Form

data-icon-type="form"

Ideal for contact forms and data collection

💭

Feedback

data-icon-type="feedback"

Best for general feedback collection widgets

📊

Survey

data-icon-type="survey"

Perfect for research surveys and questionnaires

✉️

Email

data-icon-type="email"

Great for email subscription forms

📞

Phone

data-icon-type="phone"

Suitable for call request or callback forms

💌

Message

data-icon-type="message"

Works well for messaging and DM features

❓

Help

data-icon-type="help"

Perfect for help centers and FAQ widgets

🎧

Support

data-icon-type="support"

Ideal for customer support widgets

Example: Using different icon types

<!-- Feedback widget -->
<div data-icon-type="feedback"></div>

<!-- Support widget -->
<div data-icon-type="support"></div>

<!-- Survey widget -->
<div data-icon-type="survey"></div>

Custom icons and emojis

Create unique widgets using custom icons or emojis. You can use any emoji or provide a URL to your own icon image.

Custom icon options

• Emoji: Any single emoji character (e.g., 🚀, 🎉, ⭐, 🔥)
• Image URL: Link to your custom icon image (PNG, SVG, etc.)
• Requirements: Set data-icon-type="custom" first

Example: Custom emoji icons

<!-- Rocket emoji for product launches -->
<div
  data-icon-type="custom"
  data-icon-custom="🚀"
  data-icon-bg-color="#8B5CF6"
  data-icon-color="#FFFFFF"
></div>

<!-- Party emoji for celebrations -->
<div
  data-icon-type="custom"
  data-icon-custom="🎉"
  data-icon-bg-color="#F59E0B"
  data-icon-color="#FFFFFF"
></div>

<!-- Heart emoji for testimonials -->
<div
  data-icon-type="custom"
  data-icon-custom="❤️"
  data-icon-bg-color="#EF4444"
  data-icon-color="#FFFFFF"
></div>

Example: Custom image icon

<div
  data-icon-type="custom"
  data-icon-custom="https://yourdomain.com/icon.svg"
  data-icon-bg-color="#3B82F6"
  data-icon-color="#FFFFFF"
></div>

Icon colors

Customize the background and icon colors to match your brand. Colors can be specified using hex codes, RGB values, or CSS color names.

Background color

The color of the circular icon button background

data-icon-bg-color="#3B82F6"

Default: #3B82F6 (blue)

Icon color

The color of the icon itself or text on the button

data-icon-color="#FFFFFF"

Default: #FFFFFF (white)

Example: Brand color combinations

<!-- Blue (professional) -->
<div
  data-icon-bg-color="#3B82F6"
  data-icon-color="#FFFFFF"
></div>

<!-- Green (success/positive) -->
<div
  data-icon-bg-color="#10B981"
  data-icon-color="#FFFFFF"
></div>

<!-- Purple (creative) -->
<div
  data-icon-bg-color="#8B5CF6"
  data-icon-color="#FFFFFF"
></div>

<!-- Orange (energetic) -->
<div
  data-icon-bg-color="#F97316"
  data-icon-color="#FFFFFF"
></div>

<!-- Dark (minimal) -->
<div
  data-icon-bg-color="#1F2937"
  data-icon-color="#F3F4F6"
></div>

<!-- Custom brand colors -->
<div
  data-icon-bg-color="#FF6B6B"
  data-icon-color="#FFE66D"
></div>

Icon sizes

Choose from three size options to control how prominent your icon trigger appears.

Small

Subtle, unobtrusive presence

data-icon-size="small"

~40px diameter

Medium

Balanced visibility (default)

data-icon-size="medium"

~56px diameter

Large

Highly visible, prominent

data-icon-size="large"

~72px diameter

Example: Different icon sizes

<!-- Small icon (subtle) -->
<div data-icon-size="small"></div>

<!-- Medium icon (default, balanced) -->
<div data-icon-size="medium"></div>

<!-- Large icon (prominent) -->
<div data-icon-size="large"></div>

Button styling

When using the text trigger style, you can customize the button's appearance with text, shape, and color options.

Button text

Add custom text to your button trigger to clearly communicate its purpose to users.

Button text examples

• Feedback: "Give Feedback", "Share Your Thoughts", "Tell Us More"
• Support: "Get Help", "Contact Support", "Need Assistance?"
• Survey: "Take Survey", "Quick Poll", "Share Your Opinion"
• Contact: "Contact Us", "Get in Touch", "Send Message"

Example: Button with text

<div
  data-trigger-style="text"
  data-button-text="Give Feedback"
  data-button-show-icon="true"
></div>

Button shape

Control the roundness of your button with the border radius setting. Use any CSS value.

Common border radius values

• 0 or 0px: Sharp square corners
• 4px - 8px: Subtle rounded corners (modern, clean)
• 12px - 16px: Medium rounded corners (friendly)
• 50% or 999px: Pill-shaped (maximum roundness)

Example: Different button shapes

<!-- Square corners (sharp) -->
<div data-button-border-radius="0"></div>

<!-- Subtle rounded corners (modern) -->
<div data-button-border-radius="8px"></div>

<!-- Medium rounded corners (friendly) -->
<div data-button-border-radius="12px"></div>

<!-- Pill-shaped (maximum roundness) -->
<div data-button-border-radius="50px"></div>

Button colors

Button colors are inherited from the icon style configuration. The background color and text/icon color settings apply to both icon and button triggers.

Example: Colored button with icon

<div
  data-trigger-style="text"
  data-button-text="Get Support"
  data-button-show-icon="true"
  data-button-border-radius="8px"
  data-icon-type="support"
  data-icon-bg-color="#8B5CF6"
  data-icon-color="#FFFFFF"
></div>

Tip: When using data-button-show-icon="false", the button will still use the icon background and text colors for consistent styling.

Color customization

Choose colors that align with your brand identity and create the right emotional response.

Color psychology guide

Blue (#3B82F6): Trust, professionalism, stability. Great for business and corporate contexts.

Green (#10B981): Growth, health, success. Perfect for wellness and environmental brands.

Purple (#8B5CF6): Creativity, luxury, wisdom. Ideal for creative and premium brands.

Orange (#F97316): Energy, enthusiasm, friendliness. Great for engaging and playful brands.

Red (#EF4444): Urgency, passion, excitement. Use for important actions or alerts.

Dark (#1F2937): Sophistication, elegance, minimalism. Perfect for modern, clean designs.

Accessibility tip: Ensure sufficient contrast between background and icon/text colors. Use dark icons on light backgrounds or light icons on dark backgrounds for best readability.

Styling across display modes

Icon and button styling only applies to popup and modal display modes. Inline widgets don't have trigger buttons, so these styling options are not relevant.

Inline mode

No trigger styling needed

Widget is always visible, embedded in page content

Popup mode

Full trigger styling available

Floating trigger at chosen position with custom icon/button

Modal mode

Trigger styling for manual triggers

No trigger shown if using condition-based automatic display

Common styling patterns

Here are some popular widget styling patterns for different use cases.

Pattern 1: Minimal feedback widget

Small icon-only button in bottom right corner, subtle blue color

<div
  data-display-mode="popup"
  data-trigger-style="icon"
  data-position="bottom-right"
  data-icon-type="feedback"
  data-icon-bg-color="#3B82F6"
  data-icon-color="#FFFFFF"
  data-icon-size="small"
></div>

Pattern 2: Prominent support button

Large button with text and icon in bottom right, inviting purple color

<div
  data-display-mode="popup"
  data-trigger-style="text"
  data-position="bottom-right"
  data-button-text="Get Help"
  data-button-show-icon="true"
  data-button-border-radius="50px"
  data-icon-type="support"
  data-icon-bg-color="#8B5CF6"
  data-icon-color="#FFFFFF"
  data-icon-size="large"
></div>

Pattern 3: Branded custom emoji

Fun rocket emoji for product feedback, vibrant orange brand color

<div
  data-display-mode="popup"
  data-trigger-style="icon"
  data-position="bottom-right"
  data-icon-type="custom"
  data-icon-custom="🚀"
  data-icon-bg-color="#F97316"
  data-icon-color="#FFFFFF"
  data-icon-size="medium"
></div>

Pattern 4: Professional contact form

Text-only button without icon, clean modern design with subtle rounding

<div
  data-display-mode="popup"
  data-trigger-style="text"
  data-position="bottom-right"
  data-button-text="Contact Us"
  data-button-show-icon="false"
  data-button-border-radius="8px"
  data-icon-bg-color="#1F2937"
  data-icon-color="#F3F4F6"
></div>

Pattern 5: Survey invitation

Friendly green button with clear call to action, medium size for visibility

<div
  data-display-mode="popup"
  data-trigger-style="text"
  data-position="center-right"
  data-button-text="Take Our Survey"
  data-button-show-icon="true"
  data-button-border-radius="12px"
  data-icon-type="survey"
  data-icon-bg-color="#10B981"
  data-icon-color="#FFFFFF"
  data-icon-size="medium"
></div>

Widget styling