Overview

The Flow Web Widget now supports the ability to add custom background images, allowing you to tailor the widget’s appearance to match your branding and design preferences. This feature enhances the user experience by providing greater control over the visual presentation of your widget.

Benefits

• Enhanced Customization: Personalize the widget’s background to align with your company’s brand identity.
• Improved User Engagement: A visually appealing widget can improve user interaction and engagement.
• Seamless Integration: The background customization option integrates smoothly into existing web widgets without disrupting other settings or functionality.
• Easy Preview: Users can preview their changes directly in the widget, ensuring that the appearance is as expected before deployment.

Steps to Add a Custom Background for Flow Web Widget

Step 1: Create a New Web Widget Integration

1. Go to the Integration section in the main panel on the left.
2. Click Add new integration.
3. Select Web Widget and API from the Messaging integration options.

Step 2: Access Web Widget Settings

1. Click on the newly created web widget to open its settings.
2. In the right-hand panel, navigate through the available configuration options:
   1. Install
   2. Customize
   3. Pro-active
   4. Language restrict
   5. Bot
3. Click on Customize to proceed.

Step 3: Upload a Custom Background Image

1. Scroll down to the Preview/Standalone Background Image section.
2. Click Upload an image.
3. Select and upload the image from your repository.

Step 4: Save Changes

1. After uploading the image, click Save to apply the custom background.

Step 5: Verify the Changes

1. Go back to the Install settings of the web widget.
2. In the Standalone section, copy the provided URL.

Step 6: Preview the Web Widget

1. Paste the copied URL into a web browser or test webpage.
2. Refresh the page to view the updated widget with the custom background.

Frequently Asked Questions (FAQs)

Q1: What image formats are supported for background upload?

Supported formats include JPG, PNG, and GIF.

Q2: Is there a recommended image size for the background?

It is recommended to use an image with a resolution of at least (Size, if any) for optimal display across various devices.

Q3: Can I revert to the default background after uploading a custom image?

Yes, you can remove the custom image by selecting the option to reset the background in the Customize section.

Q4: Will the background image affect the performance of the web widget?

As long as the image is optimized for web use (compressed and sized appropriately), it should not affect performance.

Q5: Can I use a different background image for the standalone mode compared to the embedded widget?

Yes, you can specify different background images for standalone and embedded versions.

Conclusion

The custom background feature for Flow Web Widget enables you to enhance your widget’s visual appeal while maintaining ease of use and seamless integration with your website. Following the steps outlined above, you can quickly apply a custom background, verify the changes, and ensure that your widget aligns with your brand's aesthetic. This added flexibility improves the overall user experience and allows for greater personalization.