Using Webhooks in Interaction Design

Cinema8 Webhooks let you send or receive real-time data between your interactive videos and external systems. This allows you to personalize content, sync data, or trigger workflows based on viewer actions.

A webhook (also known as a web callback or HTTP push API) is a method for one application to send data to another automatically when an event occurs. Cinema8 lets you trigger webhooks from within a video and optionally wait for a response before continuing playback.

Creating a Webhook

Step 1: Open the Webhook Panel

Go to the Cinema8 main menu
Click Integrations, then select Webhooks

Step 2: Add a New Webhook

Click Add Webhook
Fill out the webhook configuration:
- Webhook Name: Descriptive name
- Webhook URL: Endpoint where data will be sent
- Header Name/Value (optional): Used for authentication
- Wait for Response: Pause video until webhook completes (optional)
- Include Previous Interactions: Include past data in the payload (optional)
Click Save Settings

Adding the Webhook to a Video

Step 1: Create or Open a Project

Open an existing project or create a new interactive video

Step 2: Prepare Dynamic Fields

Decide which data fields (e.g., discountCode, imageUrl) your video will use

Step 3: Embed Webhook Data in HTML Elements

Add an HTML element to the video

Use this syntax to render the data:

For discount code:
```
DiscountCode: ${context.discountCode}
```
For image:
```
<img src="${context.imageUrl}" />
```

Step 4: Create a Clickable Area

Add a Clickable Area component to the timeline
In the On Click settings, choose Execute Webhook
Select the webhook you created (e.g., “Test Webhook”)

You can extract and use nested data from webhook responses in Cinema8.
Learn more about parsing nested data

See a Working Example

Click here to view a sample interactive video using live webhook data.