A webhook (also called a web callback or HTTP push API) is a way for an app to provide other applications with real-time information. A webhook delivers data to other applications as it happens, so you receive data immediately. Cinema8 Webhooks allow you to inject your own business processes into interactive videos.
Creating a Webhook
Let's go over the steps to add a webhook.
First, return to the main menu and click on the "Integrations" button.
Then click the "Webhooks" button. Click the "Add Webhook" button.
Let's look at the settings for the webhook:
1 - Enter the name of the webhook.
2 - Enter the URL where data will be posted. To add an extra security layer, you may want to create custom headers. This will protect your data even if someone else accesses your webhook URL.
3 - Specify the name of the header you want to create.
4 - Enter values for the header you've created. This allows you to validate the header's value before granting data access.
5 - Click to create an additional header.
6 - Enable this feature to pause the video until the webhook returns a response. This helps prevent issues like delays or connection problems while sending data.
7 - Enable this option if you want previous interactions to be included in the webhook.
8 - Click to save your settings.
Adding Webhook to Video
Create a new test webhook by following the steps above.
This URL is a test webhook within the Cinema8 platform. It's a basic echo webservice that also adds some dummy variables to the response.
In this example, the test link has two pieces of data: "discountCode" and "imageUrl". Add two HTML elements in your video project to embed this data.
Note: Cinema8 webhooks support the "nested object" model, which allows you to extract values inside objects. Learn more about using nested data with webhooks.
1 - In the HTML element, add code in the "Source Code" field.
For example, in one HTML tool, add and save: DiscountCode: ${discountCode! -}.
In the other HTML tool, add and save the code: <img src="${imageUrl}" />.
Finally, add a clickable area to trigger the webhook when clicked. Set the "On Click" feature for the clickable area to "Execute Webhook".
When clicking on the clickable area, your webhook will activate, and data will be sent to the HTML tools you added.
