Leadoo’s VisualBot empowers you to leverage the full capabilities of a decision tree in a visual, interactive format. This bot type supports all of Leadoo’s standard and advanced logic nodes, plus a few bonus features, making it a powerful tool for enhancing user experience.
For more details on the nodes available for building bots, see this article on node types.
In this guide, we’ll walk you through the steps to create your first VisualBot, sharing some handy tips and tricks along the way.
Best Use Cases for the VisualBot
Frontpage Signposts
VisualBots are ideal for creating interactive signposts on your homepage, which can help visitors navigate the most popular or high-converting pathways without needing to leave the page. This data collection powerhouse enables you to gather valuable first-party data, allowing for a deeper understanding of your audience and creating retargeting audiences based on actual behaviours.
Each interaction is stored within individual contact journey cards, giving you a complete view of the customer journey across your website and Leadoo bots, without the need for complex conversion tracking.
Form replacement
VisualBot can transform lengthy forms into a low-barrier, visually engaging format, making it easier for users to qualify themselves. This streamlined approach keeps your customer and conversion data centralised and accessible.
CTA block
Display multiple CTAs in a more visually engaging, less text-heavy format. This is perfect for right-hand columns or full-width blocks near the fold, especially if you’re already using our Chatbot or InpageBot for other CTAs.
Exit Intent
Use VisualBot as an exit-intent prompt to retain visitors who might be leaving. It can also capture valuable UX feedback to improve your website’s experience.
ROI Calculators & Quote Builders
With VisualBot’s advanced logic capabilities, you can build ROI calculators, selection-based estimates, and customised quote builders, helping customers see the value of your product or service at a glance.
How to Build a VisualBot Step-by-Step
If this is your first time building a Leadoo bot, start with our guide on How to Build your First Bot, which covers essentials like connecting nodes and navigating the workspace.
Important Note:
In VisualBot, Bot Says nodes require user interaction to progress, unlike other bot types. Keep this in mind when crafting the conversation flow, focusing on concise, high-value steps to maintain engagement.
1. Set up the style of your VisualBot
Your saved styles for Chatbot and InpageBot aren’t compatible with VisualBot, so you’ll need to create a new one.
- Open Settings at the top of the page, then select the Style tab.
- Use the right-hand panel to adjust colours, with instant visual feedback in the preview pane on the left.
- At the top of the window, toggle between different node types to preview how your style choices appear across various interactions.
Style Cheat Sheet for Different Elements
Single Choice/Multiple Choice
Forms
Calendars
To customise further, click the Layout tab to explore options for:
- Themes: Choose Modern (single colours) or Gradient (dual colours).
- Button shapes
- Background and header images
- Header and Footer text
2. Add Choice Nodes
Add either a Single Choice or Multiple Choice node to your workspace. These nodes include fields for headings, subheadings, and an image slot above each answer option.
3. Add Images to Nodes
- Click Upload Image to access the image library, where you can drag and drop or browse files to upload. These images will be available globally in Chatbot and InpageBot too.
- For optimal display, we recommend resizing images to 388×280 pixels. Supported file formats include .jpeg, .png, and .webp.
- After selecting an image, you’ll have the option to Delete, Edit, or Apply. Use Edit to crop or optimise your image, and Apply to assign it to the answer option.
4. Quick Preview & Bot Preview
To see how your options and images appear without previewing the entire bot, click Quick Preview in the node editing pane. If you need to refresh the preview, there’s a manual refresh option at the top.
When you’re ready, preview your entire bot by clicking the orange Preview button at the top of the page.
Triggering Your VisualBot
Choose Trigger Settings
VisualBot offers three trigger options to control when it appears to visitors:
- By Scroll: Activates when visitors reach a certain point on the page.
- By Page Load: The bot loads immediately with the page (recommended for forms or frontpage signposts).
- By Exit Intent: Pops up when a visitor shows exit intent, such as moving towards the browser’s close button.
Embedding Your VisualBot
Embedding VisualBot is similar to embedding InpageBot. Simply insert the bot slot or script at the desired location on your page.
For further embedding instructions, see our How to Embed Leadoo Bots.
Need assistance? Reach out to your Customer Success Manager or contact our support team at [email protected].