# 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:

<figure><img src="/files/NHNYJ26shrplXIYWhPyp" alt="" width="375"><figcaption></figcaption></figure>

```javascript
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.

<figure><img src="/files/26roCTTeBfUTjwTFMvKo" alt="" width="375"><figcaption></figcaption></figure>

```javascript
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.

<figure><img src="/files/nQGHMtQIbELStUzG4cI0" alt="" width="181"><figcaption></figcaption></figure>

```javascript
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/>.

<figure><img src="/files/JStRq2YkfuMe9pG9RIcY" alt=""><figcaption></figcaption></figure>

## 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/>

<figure><img src="/files/yBvFjRUIp7yi0XCxEhPO" alt=""><figcaption></figcaption></figure>

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>).

<figure><img src="/files/1p5LSvxQ5sBQR7wqw55P" alt=""><figcaption></figcaption></figure>

## 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>).

<figure><img src="/files/8NiJLwXASfj0xzSmFDGT" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/cMyVcdF3eS6ooVP265Ts" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/crZWUrczXXlMmPZCFNTU" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.frontnow.com/advise/inspiration/creative-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.