A webhook (also called a web callback or HTTP push API) is a method for an app to provide real-time information to other applications. It delivers data to other apps as events happen, allowing you to get data immediately. Cinema8 Webhooks enable you to integrate your own business processes into interactive videos.
Creating a Webhook
Let's walk through the steps of adding a webhook.
First, return to the main menu and click on the "Integrations" button.
Next, click the "Webhooks" button on the page that opens.
Click the "Add Webhook" button.
Let's explore the settings of the webhook you will add.
1. Webhook Name: Enter a name for the webhook.
2. Webhook URL: Enter the URL where the data will be posted. You can also create custom headers for additional security. By doing this, you can restrict access to your data and ensure only authorized users can access it.
3. Header Name: Enter the name of the header you will create.
4. Header Value: Enter the value for the header. This is used to compare and verify the header data, preventing unauthorized access to your webhook data.
5. Add New Header: Click this button to create a new header.
6. Wait for Response: Enable this option to stop the video while waiting for a response from the webhook URL. This ensures that the video does not continue until the webhook has completed its task.
7. Include Previous Interactions: Enable this feature if you want to include previous interaction data in the webhook.
8. Save Settings: Click this button to save all your settings.
Adding Webhook to a Video
Now that you've created your webhook, let's add it to a video.
Create a new project to add the webhook. Click here to see how to create a new project.
In the test link, I will use two data fields ("discountCode" and "imageUrl") that can be imported into my video. I will add two HTML elements to embed these values into the video.
Add the first HTML element to embed the "discountCode" data.
1. Source Code Field: Click on the Source Code button in the HTML element and insert the code DiscountCode: ${context.discountCode! -}, then save it.
For the second data field, "imageUrl," add the second HTML element and place the following code in the Source Code field: <img src="${context.imageUrl}" />
Next, add a clickable area that triggers the webhook when clicked. Open the settings by clicking on the Clickable Area you've added.
Add the Webhook action to the On Click field by selecting Execute Webhook from the list.
Click on the "Choose" button and select the "Test Webhook" that you created earlier.
Now, when you click on the clickable area, your Webhook will execute, and the data will be sent to the HTML tools added to your video.
Click here to view the sample video we created.