> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./api/more-features/campaign.md).

# Campaign

Render feedback, advisor, and redirect campaigns with FactFinder Web Components.

## Documentation

### Adding Feedback campaigns

Feedback campaigns can be displayed using `ff-campaign-feedbacktext` elements. You may add multiple elements, and they can be placed anywhere in the document.

Through the `label` attribute, you define which campaigns can be displayed by the element. The attribute's value must match one of the campaigns' **labels** that are defined in FactFinder.

If multiple campaigns are configured to target the same **label**, the `ff-campaign-feedbacktext` element with the corresponding `label` will serve as the outlet to all these campaigns.

Remember that a campaign's trigger condition must still be satisfied before it can be displayed by `ff-campaign-feedbacktext`. If multiple campaigns with the same **label** are triggered simultaneously, the campaign appearing **last** in the FactFinder response will be displayed.

The only necessary data binding is `{{text}}`.

{% hint style="info" %}
If you are using **HTML feedback texts**, you need to use the `{{{triple curly brace syntax}}}`.
{% endhint %}

```html
<ff-campaign-feedbacktext label="above products">
    {{text}}
    <!--or mixed content-->
    <!--<div>{{text}}</div>-->
</ff-campaign-feedbacktext>
```

**Display results from stand-alone campaign triggers**

By default, `ff-campaign-feedbacktext` only displays campaigns that are part of a **search result**. However, there is the option to trigger campaigns independent of searches. These are *landing page*, *product* and *shopping cart* campaigns.

In order to display these kind of campaigns, you have to add a corresponding attribute. The element will then only respond to the specified trigger and no longer react to search results.

<details>

<summary>Campaign triggers</summary>

| Attribute                   | Triggered by element        |
| --------------------------- | --------------------------- |
| `is-landing-page-campaign`  | `ff-campaign-landing-page`  |
| `is-product-campaign`       | `ff-campaign-product`       |
| `is-shopping-cart-campaign` | `ff-campaign-shopping-cart` |

</details>

{% hint style="info" %}
Note that only one attribute at a time is allowed.
{% endhint %}

```html
<ff-campaign-feedbacktext is-product-campaign>
    {{{text}}}
</ff-campaign-feedbacktext>

<ff-campaign-product product-id="1234"></ff-campaign-product>
```

### Adding Advisor campaigns

To integrate advisor campaigns, you need the following elements:

* `ff-campaign-advisor`
* `ff-campaign-advisor-question`
* `ff-campaign-advisor-answer`

Whenever there is an active advisor campaign in the search result, the `ff-campaign-advisor` element will display it.

```html
<ff-campaign-advisor></ff-campaign-advisor>
```

**`ff-campaign-advisor`**

`ff-campaign-advisor` is the outer element that contains `ff-campaign-advisor-question` and `ff-campaign-advisor-answer`. It offers two optional attributes, `name` and `not`, to limit which campaigns the element shall display.

With `name`, you can restrict the element to display one particular advisor campaign. The value matches a campaign name configured in FactFinder UI.

```html
<ff-campaign-advisor name="your-advisor-campaign-name">
    ...
</ff-campaign-advisor>
```

The `not` attribute takes a comma-separated list of campaign names that shall be ignored.

```html
<ff-campaign-advisor not="ignored-campaign-1,ignored-campaign-2">
    ...
</ff-campaign-advisor>
```

{% hint style="info" %}
When both `name` and `not` are set, only the `name` attribute will be considered. `not` will be ignored.
{% endhint %}

**`ff-campaign-advisor-question`**

`ff-campaign-advisor-question` is used as a template for each **question** configured in FactFinder. It is rendered at the position you define it in the HTML.

To enable **data binding** to the underlying `question` object from the FactFinder response, you must place a `data-question` attribute (without a value) on a child element of `ff-campaign-advisor-question`.

```html
<ff-campaign-advisor>
    <ff-campaign-advisor-question>
        <h2 data-question>{{{text}}}</h2>
        ...
    </ff-campaign-advisor-question>
</ff-campaign-advisor>
```

If the `text` of your question contains HTML, use **triple curly braces**. Double curly braces render the contained text verbatim without interpreting it as HTML.

**`ff-campaign-advisor-answer`**

`ff-campaign-advisor-answer` is used as a template for each **answer** in the applied advisor campaign. It must be nested inside `ff-campaign-advisor-question`, where it is rendered at the position it is defined in the HTML.

Unlike `ff-campaign-advisor-question`, it does not require further attributes and **data binding** to the underlying `answer` object is available inside the entire `ff-campaign-advisor-answer` element.

```html
<ff-campaign-advisor>
    <ff-campaign-advisor-question>
        <h2 data-question>{{{text}}}</h2>
        <div class="answers-box">
            <ff-campaign-advisor-answer>
                <div class="answer">
                    {{{text}}}
                </div>
            </ff-campaign-advisor-answer>
        </div>
    </ff-campaign-advisor-question>
</ff-campaign-advisor>
```

Again, use **triple curly braces** for data binding if your answer `text` contains HTML.

{% hint style="warning" %}
For advisor campaigns to work, do not set the `ff-communication` parameters `use-browser-history` or `use-url-parameters` to `false`.
{% endhint %}

### Adding Redirect campaigns

`ff-campaign-redirect` redirects the browser to a redirect campaign's destination. When the latest FactFinder request triggers a redirect campaign, response processing stops and the redirect happens immediately.

Place the element directly after the opening `<body>` tag. This ensures it runs before other elements.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        ...
    </head>
    <body>
        <ff-campaign-redirect relative-to-origin></ff-campaign-redirect>
        ...
    </body>
</html>
```

Internally, the element uses `document.location.replace`.

**`relative-to-origin`**

`relative-to-origin` is optional and takes no value. When present, a relative destination without a leading slash resolves against the current page's origin. Absolute URLs and paths beginning with `/` are unaffected.

For a current URL of `https://www.your.shop/section/sub-section`:

<details>

<summary>URL resolution</summary>

| Campaign destination         | With `relative-to-origin`             | Without `relative-to-origin`                  |
| ---------------------------- | ------------------------------------- | --------------------------------------------- |
| `relative/page`              | `https://www.your.shop/relative/page` | `https://www.your.shop/section/relative/page` |
| `/relative/page`             | `https://www.your.shop/relative/page` | `https://www.your.shop/relative/page`         |
| `https://www.fact-finder.de` | `https://www.fact-finder.de`          | `https://www.fact-finder.de`                  |

</details>

## Demo

Try the [Campaign demo](https://search-web-components.fact-finder.de/demos/4.x/ff-campaign).

## API code

### `ff-campaign-advisor`

**Properties**

<details>

<summary>Properties</summary>

| Name                              | Description                                                                                                                |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **name** (String) (default: "")   | Binds the element to a campaign name defined in the FactFinder backend.                                                    |
| **not** (String) (default: empty) | Takes a campaign name (as defined in FactFinder backend) as parameter. This element won't trigger for the passed campaign. |

</details>

**Events**

<details>

<summary>Events</summary>

| Name            | Description                                                                                                                                  |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **dom-updated** | This event is triggered when the element has received new data and the template for this element and all sub elements have been punched out. |

</details>

### `ff-campaign-advisor-answer`

**Properties**

<details>

<summary>Properties</summary>

| Name                                 | Description                                                             |
| ------------------------------------ | ----------------------------------------------------------------------- |
| **answer** (Object) (default: empty) | Binds the element to a campaign name defined in the FactFinder backend. |

</details>

**Events**

<details>

<summary>Events</summary>

| Name            | Description                                                                                                                                  |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **dom-updated** | This event is triggered when the element has received new data and the template for this element and all sub elements have been punched out. |

</details>

### `ff-campaign-advisor-question`

**Properties**

<details>

<summary>Properties</summary>

| Name                                   | Description                        |
| -------------------------------------- | ---------------------------------- |
| **question** (Object) (default: empty) | The required data from FactFinder. |

</details>

### `ff-campaign-feedbacktext`

**Properties**

<details>

<summary>Properties</summary>

| Name                                    | Description                                                                                                                                                                                                              |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **label** (String) (default: "")        | Binds the element to a campaign label defined in the FactFinder backend.                                                                                                                                                 |
| **is-product-campaign** (Boolean)       | If this attribute is present, regardless of its value, the `ff-campaign-feedbacktext` is only considered for product campaigns retrieved by [ff-campaign-product](file:///api/4.x/ff-campaign-product)                   |
| **is-shopping-cart-campaign** (Boolean) | If this attribute is present, regardless of its value, the `ff-campaign-feedbacktext` is only considered for shopping cart campaigns retrieved by [ff-campaign-shopping-cart](file:///api/4.x/ff-campaign-shopping-cart) |
| **is-landing-page-campaign** (Boolean)  | If this attribute is present, regardless of its value, the `ff-campaign-feedbacktext` is only considered for landing page campaigns retrieved by [ff-campaign-landing-page](file:///api/4.x/ff-campaign-landing-page)    |

</details>

**Events**

<details>

<summary>Events</summary>

| Name            | Description                                                                                                                                  |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **dom-updated** | This event is triggered when the element has received new data and the template for this element and all sub elements have been punched out. |

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./api/more-features/campaign.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.