Creative Components

Our goal is to ensure users easily discover and interact with the Advisor at key moments throughout the customer journey. Below are best practices inspired by excellent implementations, such as on Compo.de and Jumbo,ch, that can be applied across digital touchpoints.

Best Practices for CTA Buttons - Jumbo:

Our pioneering customer Jumbo crafted some inspiring CTA to drive traffic to the AI experience. You can check them out on https://jumbo.ch or download their mobile app.

1. Question Carousel on the Homepage

To inspire your user how to start an AI conversation, give examples in an animated carousel:

advisor.sendMessage("Berate mich zu " + example_topic)

2. Direct Inputfield on Home or PDPs

Instead of guessing what the user want to ask and placing pre-defined question buttons as a CTA, it is even better to let the user enter the question directly.

You can simply put an inputfield on the PDP and the user can type the question in their and as soon as he hits enter, the Advisor directly starts answering.

advisor.sendMessage(inputField.value)

3. Voice-Button on Mobile App

Jumbo added a push-to-talk button to their mobile app using the out-of-the-box native (browser) transcription. As soon as the user finished talking and the voice is transcribed to text, the question is sent to our Advisor.

advisor.sendMessage(transcribedAudio)

Best Practices for CTA Buttons - Compo.de:

Compo.de offers a great example of how to integrate the Advisor seamlessly across the customer experience. Through thoughtful CTA design and placement, users are consistently encouraged to engage with the Advisor - from awareness to detailed exploration.

Below are four key elements that demonstrate how Compo.de drives visibility and interaction with the tool at just the right touchpoints.

1. Prominent Chat Icon with Built-in CTA

Compo.de features a large, clearly visible chat icon that stays accessible throughout the site. The icon includes a short call-to-action message, inviting users to interact ("Ask us”). This makes the tool easy to discover and immediately signals its value. You can have a look at it on https://www.compo.de/.

2. Informative Banner Introducing the Advisor

Compo.de uses a banner element that explains what the Advisor is and how it can help. This banner provides a short, benefit-driven explanation, helping users understand the purpose of the tool before engaging with it. Check also: https://www.compo.de/

Clicking the banner takes the user to a specific landing page with detailed information about the Advisor. This page explains the Advisor’s features, use cases, and benefits in more depth. It builds trust and helps users make an informed decision before starting a conversation (https://www.compo.de/service/frag-uns).

3. Product-Specific CTA Triggering Advisor with Relevant Prompt

On every product detail page (PDP), there is a "Ask about this product" CTA. When clicked, it opens the Advisor automatically and triggers a pre-filled prompt related to the specific product or topic the user is viewing. This approach reduces friction, encourages interaction, and ensures the conversation starts with helpful, context-aware information tailored to the user’s intent (check e.g.: https://www.compo.de/produkte/rasenpflege/rasenduenger/compo-bio-aqua-depot-rasenduenger).