Skip to main content

How to collect data into an internal datasource via Webhook

Preparation​

Create an internal datasource​

  1. Go to Settings > Datasources > Internal Datasources and click Add internal datasource
  2. Name your datasource and select Table type
  3. Click Save

img.png

  1. Set up your data fields

img_9.png

tip

For easier set-up you can copy the following JSON structure and paste it with Import from JSON functionality

{
    "table-datasource-XXO": {
        "header": {
            "Name": "string",
            "Email": "string",
            "ID": "string",
            "Language": "string",
            "Timestamp": "string"
        },
        "rows": [
            {
                "Name": "",
                "Email": "",
                "ID": "",
                "Language": "",
                "Timestamp": ""
            }
        ],
        "connectors": {}
    }
}

Create a Webhook API key​

  1. Go to Settings > Integration > API keys and click Add new
  2. Name your API key
  3. Select Webhook API call scope and click Save

img_2.png

Create a webhook action​

  1. Add a new action and select Datasource action type
  2. Set the Action type to Insert to internal datasource array
  3. Set the Target to your created datasource

img_3.png

img_4.png

Configure the content​

Downloadable Content​

Try it out!

Content for datasource modification via webhook

NOTE: Please enable Import as Content in the import modal!

  1. Select your content and click OK

img_5.png

  1. Select the widget, go to the Other tab and click Edit touch events

img_6.png

  1. Add a new action, set the Action type to Execute action batch and add Sent fields using the Widget's value type
  2. Choose the fields you want to collect

img_7.png

Configure the touch action​

  1. Click on the Actions button to enter the Action batch
  2. Add a new action, set the Action type to Execute action batch and add Sent fields using the Call function type

img_8.png

  1. Use the following script to build your webhook payload:
(receivedValue) => {
let time = Date.now();
let payload = 
{
	"event_id": "XXO",
    "keySelector": "table-datasource-XXO.rows",
    "data": {
                "Name": receivedValue.CustomerName,
                "Email": receivedValue.CustomerEmail,
                "ID": receivedValue.CustomerId,
                "Language": "NL",
                "Timestamp": time
			},
	"index": 0
};
return btoa(JSON.stringify(payload));
}
WATCH OUT FOR THIS

Make sure your keySelector contains your internal datasource table name like below:

"keySelector": "YOURTABLENAME.rows" -> in our case it is -> "keySelector": "table-datasource-XXO.rows",

Make sure you use your TABLE fields names

"YOUR_TABLE_FIELD_NAME": receivedValue.CustomerName, -> in our case it is -> "Name": receivedValue.CustomerName,
"YOUR_TABLE_FIELD_NAME": receivedValue.CustomerName, -> in our case it is -> "Email": receivedValue.CustomerEmail,
"YOUR_TABLE_FIELD_NAME": receivedValue.CustomerName, -> in our case it is -> "ID": receivedValue.CustomerId,

Call the webhook​

  1. Click on the Actions button to enter the Action batch again
  2. Add a Call API action with the following URL

img_10.png

API URL

https://YOURSERVER/public-api/integration/webhooks?apiKey=YOURAPIKEY&payload={payload}
Tip!

If you have further questions please do not hesitate to contact us at [email protected]. Happy editing!