# Test your Signals interventions in the demo application
> Use the interactive demo e-shop to see your Signals configuration in action.
> Source: https://docs.snowplow.io/tutorials/signals-interventions/test-with-demo-app/
> Documentation index: https://docs.snowplow.io/llms.txt

[![Open in Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/snowplow-incubator/signals-interventions-demo/blob/main/attributes_and_interventions.ipynb)

Now that you've defined attributes and interventions, it's time to see them work in a real application. We've prepared a demo React application with Snowplow tracking that can integrate with your Signals instance to demonstrate real-time personalization.

The demo application features:

- **Product catalog**: products fetched from an external API
- **Snowplow tracking**: the [JavaScript tracker](/docs/sources/web-trackers/) with the [ecommerce plugin](/docs/sources/web-trackers/tracking-events/ecommerce/)
- **Intervention display**: the [browser tracker plugin](/docs/signals/applications/subscribe/#subscribe-with-the-browser-tracker-plugin) to receive and show intervention banners
- **Logging**: the app prints to the console when it tracks an event, or receives an intervention
- **Reset functionality**: ability to clear your user data and start fresh

## Access the demo application

The demo application is deployed at:

<https://snowplow-incubator.github.io/signals-interventions-demo/>

When you first open the app, you'll see a configuration screen.

![Screenshot showing the configuration page of the demo app.](/assets/images/demo-configure-0759b8ea89e72ae691dbe3b1dcbb98ba.png)

Enter your credentials from the setup step.

- **Collector URL**: your Snowplow Collector endpoint for the pipeline you enabled Signals on (see the "Pipelines" section in Snowplow Console)
- **Profiles API URL**: your Signals API URL (from Snowplow Console > **Signals** > **Overview**)

The app will store these values in your browser's local storage, so you won't need to enter them again during this session.

Click **Start Shopping** to proceed to the e-shop.

## Test your interventions

Follow these steps to trigger each intervention.

### Trigger the discount intervention

1. Browse the product catalog

2. Click on different products to view their details

3. After viewing four products, you should see a banner appear at the top:

   - **Message**: "10% off your next purchase!"
   - **Code**: `SAVE10`

### Trigger the cart abandonment intervention

1. Click **Add to Cart** on any product
2. After adding at least one item, you should see:
   - **Message**: "Don't forget your items in cart!"

### Trigger the free shipping intervention

1. Add multiple items to your cart until the total value exceeds $100

2. You should see:

   - **Message**: "Free shipping on orders over $100!"
   - **Code**: `FREE`

![Screenshot showing a triggered intervention in the demo app.](/assets/images/demo-intervention-e9c05f07f0877ce583bd66b4085131c1.png)

## Inspecting events, attributes and interventions using Snowplow Inspector

We highly recommend installing the [Snowplow Inspector](/docs/testing/snowplow-inspector/) Chrome extension that lets you validate which Snowplow events are triggering on the website and also check the values of Signals attributes and interventions.

You can install the extension from the [Chrome Web Store](https://chromewebstore.google.com/detail/snowplow-inspector/maplkdomeamdlngconidoefjpogkmljm). Once you add the extension to Chrome, you can view it by [opening Developer Tools](https://developer.chrome.com/docs/devtools/open/) (usually `Ctrl`+`Shift`+`I` or on Mac `Cmd`+`Option`+`I`), where it has its own tab named 'Snowplow'. Right away, you will see the tracked events as you open a product or add a product to cart.

![Screenshot showing the Snowplow Inspector extension with tracked events from the demo app.](/assets/images/inspector-events-cc8f7737b748821cc26528aa7c0f0be0.png)

To configure the extension to show Signals attributes and interventions:

1. In Chrome, navigate to [the Extensions settings page](chrome://extensions/)
2. Click on "Details" for the Snowplow Inspector extension
3. Scroll down and click on "Extension options"
4. Click on "Add new organization" and enter your Organization ID and API key details.

Now, in addition to seeing the Snowplow events tracked, you will be able to see the attributes and interventions calculated by Signals after switching the section on the left side of the extension.

![Screenshot showing the Snowplow Inspector extension with Signals attributes displayed.](/assets/images/inspector-attributes-067b8df903f7e2a74c7c8deb6dc37b3a.png)

![Screenshot showing the Snowplow Inspector extension with Signals interventions displayed.](/assets/images/inspector-interventions-6c70a032c7a0aec14f6f79c4521336bf.png)

## Behind the scenes

Here's what happens when you interact with the demo app:

1. **Event tracking**: when you view a product or add to cart, the JavaScript tracker sends an ecommerce event to your Snowplow Collector
2. **Attribute calculation**: Signals processes the event and updates your user attributes in real time
3. **Intervention evaluation**: Signals checks if any intervention criteria are now met
4. **Delivery**: if an intervention triggers, Signals sends it to the browser via Server-Sent Events (SSE)
5. **Display**: the browser tracker plugin receives the intervention and your application displays the appropriate banner

## Reset and experiment

You can click **Reset User Data** to clear your current user session and start testing again with a fresh profile. This generates a new `domain_userid` so you can re-trigger interventions.

The demo app is open source. You can explore the implementation in the [GitHub repository](https://github.com/snowplow-incubator/signals-interventions-demo):

- **Tracker setup**: see how the Snowplow tracker and Signals plugin are initialized in `app/src/snowplow.ts`
- **Intervention handling**: see how interventions are received and displayed in `app/src/App.tsx`
- **Attribute definitions**: review the Python notebook `attributes_and_interventions.ipynb` that you followed in this tutorial

You've successfully configured Signals to calculate real-time attributes and trigger personalized interventions based on user behavior.