Supportiko
  • Introduction
  • Getting Started
    • Register and Log In
    • Create and Customize Your Widget
    • Create AI Assistant
      • AI Settings
      • Train Your AI Assistant
      • Test Your AI Assistant
      • AI Assistant Chat History
    • Create Agents
      • Agents list
      • Add/Edit Agent
      • Welcome Messages
    • Export
    • Profile Management
    • Remove Supportiko logo
Powered by GitBook
On this page
  1. Getting Started

Create and Customize Your Widget

Page: Widget

PreviousRegister and Log InNextCreate AI Assistant

Last updated 18 days ago

This is where you can easily customize the appearance and behavior of your chat widget to match your website’s style and meet your customer support needs. Let’s walk through the process step by step

The Widget Settings section allows you to tweak every aspect of your chat widget. Here’s how you can get started:

  1. Enable Your Widget

    • The first thing to do is toggle the Enable Widget switch to the "on" position. This ensures your widget is active and visible on your website. (Note: Your widget won’t appear on your site unless this option is enabled.)

  2. Set Your Site URL

    • Enter the URL of your website (e.g., https://example.com) where the widget will be displayed. This helps Supportiko know where to integrate the widget.

  3. Add a Widget Title and Subtitle

    • Customize the Widget Title (e.g., "How Can We Help?") to greet your visitors.

    • Use the Widget Subtitle (e.g., "Select a team member to start chatting") to provide a helpful prompt for your users.

  4. Choose a Chat Icon

    • Pick an icon that best represents your chat widget from the available options (e.g., a speech bubble). This icon will appear on your site to invite users to chat.

  5. Customize Colors

    • Set the Base Color (e.g., #ffd000 for a yellow shade) to match your brand.

    • Adjust the Text Color (e.g., #000000 for black) to ensure readability.

  6. Position the Widget

    • Decide where the widget appears on your site by selecting the Position (e.g., "Right"). This controls the side of the screen where the chat icon will sit.

Advanced Customization

For even more control, you can adjust the widget’s position with precision:

  • Offset X: Move the widget horizontally (left or right) to fine-tune its placement.

  • Offset Y: Adjust the vertical position (up or down) to align it perfectly on your page.

  • Logo: Add your brand’s logo to make the widget feel more personalized.

  • Widget Title and Subtitle: These will appear at the top of the chat window, helping users know who they’re connecting with (e.g., your team members like Ema, Mark, or Emily).

What Your Visitors Will See

Once you’ve customized your settings, here’s how your widget will look on your website:

  • Widget Label: This is the text that appears with the chat icon (e.g., "Need Help?") to catch your visitors’ attention.

  • Chat Icon: The chosen icon (e.g., a yellow speech bubble) will be displayed next to the label, making it easy for users to start a chat.

Preview Your Chat Widget

you can see exactly how your chat widget will look and feel on your website at any time during customization. The Preview feature makes it easy to test your settings without needing to visit your live site.

How to Preview Your Widget

  1. Locate the Preview Button On the Widget Settings page in your Admin Panel, find the Preview button at the top-right corner of the screen.

  2. Open the Preview Page Click the Preview button to launch a new preview page. This page displays your chat widget with all the current properties you’ve set, such as the title, subtitle, colors, icon, and position.

The Preview feature allows you to experiment with different settings and instantly see the results. You can tweak the design—like adjusting the colors or changing the icon—and ensure everything looks perfect before going live.