This article guides you on how to efficiently set up your iAdvize widgets on your e-commerce website.
Simple adjustments in integration, styling, and content can directly impact your engagement and conversion rates while ensuring a smooth user experience.
Each page of your e-commerce site plays a specific role in the customer journey.
NB: Our recommendations apply to AI-powered widgets (except for the Badge).
Other types of standard widgets are also available in your iAdvize space.
The 3 key takeaways
- Your widgets should be less prominent than your primary buttons
- The design of your widgets should be consistent with your brand guidelines, without being confused with plain text
- Test the journey: run test conversations, check the minimized state, verify no element is hidden or inaccessible, etc.
Homepage
🎯 Objective
Guide visitors to maximize product discovery
Floating Conversation Starters
Use 2–3 static starters
On the homepage, no contextual data is available to generate dynamic (AI-based) starters. | |
| Apply a consistent design aligned with your brand guidelines (colors, border radius…). Your background color should have enough contrast to ensure good visibility on the page. | |
| Check that the conversation’s minimized state (bubble) does not hide any buttons or clickable elements on all pages where it may appear. |
Smart banner
Use 2 static starters Examples:
On the homepage, no contextual data is available to generate dynamic (AI-based) starters. | |
Apply a consistent design aligned with your brand guidelines (colors, border radius…). 💡 Tips: ideally use the design of your secondary buttons. | |
| Check that the conversation’s minimized state (bubble) does not hide any buttons or clickable elements on all pages where it may appear. |
Category & Search Page
🎯 Objective
Inform and reassure to encourage conversation
Embedded Conversation Starters
Use 2–3 dynamic starters
| |
Apply a consistent design aligned with your brand guidelines. They should not be more visible than your primary buttons (“Add to cart”), nor be confused with plain text. 💡 Tips: you can use the design of your secondary buttons. | |
| Check the widget display on desktop and mobile to ensure it is correctly positioned and does not overlap key buttons or information on your site. | |
| Check that the conversation’s minimized state (bubble) does not hide any buttons or clickable elements on all pages where it may appear. |
Floating Conversation Starters
Use 2–3 dynamic starters
| |
| Apply a consistent design aligned with your brand guidelines. They should not be confused with plain text. Your starters background color must have sufficient contrast to ensure good visibility on the page. | |
| Check that the conversation’s minimized state (bubble) does not hide any buttons or clickable elements on all pages where it may appear. |
Smart banner
Use 2–3 dynamic starters
| |
Apply a consistent design aligned with your brand guidelines. They should not be more visible than your primary buttons (“Add to cart”), nor be confused with plain text. 💡 Tips: you can use the design of your secondary buttons. | |
| Check that the conversation’s minimized state (bubble) does not hide any buttons or clickable elements on all pages where it may appear. |
Product Page
Embedded Conversation Starters
| Place your starters below the native “Add to cart” button Ensure your AI Knowledge is complete and up to date so that dynamic starters are relevant. | |
Apply a consistent design aligned with your brand guidelines. They should not be more visible than your primary buttons (“Add to cart”), nor be confused with plain text. 💡 Tips: you can use the design of your secondary buttons. | |
| Starters default should be dynamic (higher engagement) but if looking for revenue incrementality: look at it on a case by case basis and see if a static starter would make sense? on delivery or payment for example | Statics starters examples:
|
| Check the widget display on desktop and mobile to ensure it is correctly positioned and does not overlap key buttons or information on your site. | |
| Check that the conversation’s minimized state (bubble) does not hide any buttons or clickable elements on all pages where it may appear. |
Cart & Checkout Page
🎯 Objective
Reassure to reduce cart abandonment
Embedded Conversation Starters
| Place them below the cart confirmation button (never above) | |
Apply a consistent design aligned with your brand guidelines. They should not be more visible than your primary buttons (“Place order”), nor be confused with plain text. 💡 Tips: you can use the design of your secondary buttons (colors, radius…) | |
Use static starters on frequent topics that can remove purchase blockers (payment methods, delivery times and fees, returns and refunds…) Note: Avoid topics that may create distrust for your visitors. Examples to avoid: Is payment secure? Are the products good quality?
On the checkout, no contextual data is available to generate dynamic (AI-based) starters. | |
Test the full journey: Cart Payment Confirmation Note: Soon, your minimized conversation may appear as an integrated button on your pages (instead of a floating bubble) so users can resume the conversation.
|
Customer results
Simple adjustments like these significantly improved engagement and conversion rates in tests we ran with customers.
Mademoiselle Bio - Beauty
Category page embedded Conversation Starters, compared to a classic floating widget, increased the engagement rate by 10x.
Rouge Gorge - Fashion
More relevant dynamic conversation starters vs static starters alone increased engagement by 66%.
Kendra Scott - Jewelry
Result 1 – Placing conversation starters below and close to the native Add to Cart CTA produced a better engagement rate (+12%) which translated to a higher add-to-cart rate (+1.7%).
Result 2 – To maximize the impact of Conversation Starters on mobile, position them directly below the native Add to Cart CTA. This impacted the add-to-cart rate by +1.9% and the conversion rate by +2.7%.
Similar results were observed on desktop.