Floating Bar in Solve Widget

Launching the Solve Widget as a floating bar provides a dynamic and accessible way for users to interact with your support resources. This feature allows you to position a search bar at the top, middle, or bottom of your webpage, ensuring that help is always available to your end users. This article will guide you through using the Solve Widget as a floating bar.

Use Case

An e-commerce company added a Floating Bar to its Help Center's homepage. This allowed customers to quickly find answers to common questions, such as 'Where is my order?' or 'How do I return an item?' As a result, customers received faster support, the company saw a reduction in support tickets, and the overall customer experience improved.

Different States of Floating Bar

The Solve Widget's floating bar presents itself in four different states:

1. Default floating bar - The floating bar or search bar is a horizontal strip that is placed at the top, middle, or bottom of the screen. It serves as a readily available entry point for initiating Solve Widget interactions where end users can access support information.
   

   

2. Floating bar with intents - Above the floating bar, you’ll see suggested intents or workflows that you have set up in your Forethought dashboard. This state is designed to reduce the amount of typing an end user has to do, and to provide quick access to very common searches.
   

   

3. Floating bar on desktop - Clicking the floating bar opens an expanded widget, where end users can interact with Solve Widget by typing in their questions or issues until their issue is resolved.
   

   

4. Floating bar in mobile devices - When a user taps the floating bar on a mobile device, the expanded widget has the same look as the existing widget. Users can then type their questions or issues into this widget until their concerns are resolved.
   . 

How to Launch Solve Widget as a Floating Bar

To launch Solve Widget as a floating bar, follow the steps below:

1. Navigate to Solve > Configuration > Widget tab.
   
2. At the right side of the dashboard, click Theme. 
3. Under the Launch style, select Floating bar. 
4. Choose where to place it: top, middle, or bottom of your webpage.
   
5. Customize the visual elements such as: 
   • Upload Header Logo: Add a header logo. This will be displayed on mobile devices.
   • Enter Chat Header: Input a chat header. This will also appear on mobile devices.
   • Select Font: Choose a suitable font for your widget.
   • Choose Theme Color: Pick a theme color that matches your brand.
   • Upload Image Avatar: Add an image avatar to personalize the widget.
6. Add a greeting message.
7. Optional: Add intro image, intro title, and intro subtitle.
8. Enhance the user experience by:
   • Displaying Intents: If available, display intents to help users quickly find what they need. When this is enabled, the intents will be shown above the floating bar. 
     
   • Enabling Free-Form Text Input and Confirm Tag Selection:
     1. Allow users to input text freely.
     2. Enable confirm tag selection. When enabled, end users will see a prompt to choose a relevant tag if no tag is provided through the embed script.
        
9. Click Preview to test the floating bar.
10. When everything looks good, hit Publish. This will make the floating bar visible on your homepage to end users.