Chatbot Preview and Design Customization Guide
This guide provides detailed instructions on how to preview your chatbot and customize its design before publishing. Follow these steps to ensure your chatbot looks and functions exactly as you want it to on your website.
Previewing Your Chatbot
Step 1: Access the Publish Section
- To begin, navigate to the sidebar in your chatbot development environment.
- Click on the Publish icon to open the publishing options.
Step 2: Open the Web Live Chat Channel
- Within the publish section, locate and open the Web Live Chat Channel. This option allows you to set up and preview your chatbot as it would appear on your website.
Step 3: Whitelist Your Domain
- If your domain is not already whitelisted (approved for use), you need to add it to ensure your chatbot can be deployed on your site.
- Click on Add a Domain to proceed.
- Enter your deployment URL in the provided field. For example, if your website is
app.ideta.io, you would enter this URL. - Click the Add button to whitelist your domain.
- Remember to Save your changes to confirm the domain addition.
Step 4: View Your Chatbot
- After saving, a button labeled View Chatbot on demo page becomes available.
- Clicking this button will open a demo page in a new tab, displaying your chatbot on the right-hand side.
- This allows you to interact with and test your chatbot in a live environment, simulating how users will experience it on your actual website.
Customizing Chatbot Design
Step 1: Return to the Publish Section
- If you wish to make design changes after previewing your chatbot, navigate back to the Publish section of the platform.
Step 2: Access Design Customization Options
- Click on the Design button to open the customization options.
- A drop-down menu will appear, offering various elements of the chatbot you can customize, such as:
- Icon and bubble
- Chat window
- Home menu
Step 3: Customize Design Elements
- Select the element you wish to customize from the drop-down menu.
- Upon selection, you will be presented with a range of options to modify the design of the chosen element. This could include changing colors, fonts, sizes, and other visual aspects to match your brand identity or personal preference.
Step 4: Save Your Changes
- After making your desired design adjustments, ensure you save your changes to apply them to your chatbot.
Conclusion
By following these steps, you can effectively preview and customize your chatbot before making it live on your website. This process ensures that your chatbot not only functions as intended but also aligns with your visual branding and provides a seamless user experience. Always remember to test your chatbot thoroughly in the preview mode and make any necessary adjustments in the design customization section before publishing.