Getting Started with Webhooks

If you've gotten this far, you've probably started sending data into Bento but now wondering how to get it out.

Webhooks are the answer.

Webhooks allow you to pass data from one system (i.e Bento) to another system across the internet. You can use it to send a text message, update a CRM, or fill out a spreadsheet.

Whilst learning how to use webhooks requires a tiny bit of code knowledge, we think that with some trial and error you'll nail it. Additionally, Bento provides some debugging tooling inside the app to make it happen.

Where to find webhooks

To access webhooks, go to Workflows and create your first automation.

Next, decide what event you will trigger the webhook based on. This could be a purchase, pageview, or form submission. All events are compatible with webhooks.

Then, drag a webhook onto the board and connect them up.

Configuring your webhook

Once they are connecting you can begin configuring the webhook. Begin by choosing the URL you want the data to be sent to.

For now, all webhook events are submitted as a POST request.

If the request fails, we'll retry a few more times before failing the visitors session. It's important that you test your endpoints before sending live traffic into Bento.

If your API requires Basic Authentication, you’ll add the username and password to the request like: https://user:[email protected].

Writing your payload

In Bento, all requests are sent as a JSON request (Content-Type: application/json). You can configure what the structure of that request actually is.

Additionally, you have access to all the variables you have access to in your emails, primarily {{ visitor }} and {{ products }}, PLUS the data from the event that triggered the Workflow/Automation.

This allows you to write payloads like:

{
  "email": "{{ visitor.email }}",
  "event_type": "{{ event.data.type }}",
  "event": {{ event | replace: '=>', ':'}}
}

Which will render:

{
  "email": "[email protected]",
  "event_type": "$event_name",
  "event": {"id": 1, "data": {...}, ...}
}

This should enable you to create the perfect payload to send to any system.

Previewing your payload

As you type out your payload, it will render in real-time based on sample data. This will allow you to check that the syntax looks OK and that all your Liquid is correct.