Style Zoe Advisor in Experience Designer
Use Experience Designer to customize how Zoe appears and behaves when embedded into the Results Page of your assistant. You can control how product responses are shown and how Zoe interacts with users on the results page.
Enable Zoe on the results page
- In Experience Designer, open the Results page using the page selector above the canvas.
- Select the Top Products component on the canvas.
- In the settings menu on the right, turn on the Zoovu Ontology Expert toggle.
Choose how users interact with Zoe
Once you enable Zoovu Ontology Expert in Experience Designer, you can decide how users will interact with Zoe. The options depend on whether you're using the Top Products component or the Recommendations component.
Enable conversations
- Select the Top Products component on the canvas.
- In the right-hand settings panel, enable Zoovu Ontology Expert.
- Select Enable conversation if you want users to ask Zoe questions and get real-time responses.
Configurable components
Select a subcomponent in Experience Designer to preview and adjust its styling. Changes apply immediately in preview, so you can test how updates affect the overall experience before publishing.
| Component | Description |
|---|---|
| Heading | Styles the main title shown at the top of the Zoe experience. |
| Personalized product descriptions | Styles the generated product explanations - including spacing, typography, and emphasis. |
| Suggested questions | Styles the prompts that help users continue the conversation or explore common topics. |
| User text bubble | Adjusts how user messages appear in the chat, including color and alignment. |
| Zoe text bubble | Controls the appearance of Zoe’s responses, helping distinguish them clearly from user input. |
| Feedback | Styles feedback options that allow users to rate or respond to Zoe’s answers. |
| Chat input | Styles the text input field where users type questions. |
| Send question button | Styles the button used to submit questions - including icon, color, and size. |
| Legal content message | Styles required legal or compliance-related text within the experience. |
| Terms and conditions | Styles and positions links or text related to terms and conditions. |
Customize Zoe
- Select the Recommendations component on the canvas.
- In the right-hand settings panel, enable Zoovu Ontology Expert.
- Use the styling options to adjust Zoe's appearance.
Use the Typing animation toggle to add a visual typing effect while Zoe prepares a response, giving the experience a natural feel.
After making updates in Experience Designer, click Save and Apply to publish the changes to your assistant.