In this article, I'm going to show how to use Arena Webhooks in your events, passing by the whole flow.

When to use Arena Webhooks?

You can use Arena Webhooks when you need to get the HTML of each new post made in your event. It might be useful to rendering the post separately in some way or if you are using the SSR approach to know when changes happen and update the event page.

How to start using it?

To start using webhooks you have to set them into the dashboard. It is important to bring up that the webhook can be set either in general settings or in event settings. Thus, the first step is to define if you are going to use the same webhook for all your events or if you are going to treat them separately for each post.

  • Set the webhook URL in general settings:

The webhook set in this way will be used for all your events, except the ones that have their specific webhook in event settings.

To set this, go to Profile -> Settings -> EventDefaults, then fill the field "webhook URL" with your input and click in "Save". This flow can be seen in the image below.

  • Set the webhook URL in event settings:

The webhook set in this way will be used specifically for the event defined.

In your dashboard go to Liveblog, click in the option "create new event" or "edit event", then fill the field "webhook URL" with your input and click in "Create" or "Save". This flow can be seen in the image below.

Now you can start posting and receive the HTML of each new post through the webhook defined by you.

How is the post data sent?

After making the setting in the dashboard, when you make a new post in your event, the Arena system will send a POST request for the webhook defined by you passing the HTML and all the metadata you need to identify that post.

The data are sent in the following format:

event: {
id,
slug,
title,
createdAt,
modifiedAt,
eventStatus,
location,
dateAndTime,
description,
liveBlogLayout,
language,
share,
pagination,
timeFormat,
reactionTyope
}

post: {
id,
title,
showEditorName,
createdAt,
backgroundColor,
postType,
editor: {
name,
image
}
}


You can see the description of each attribute in the table below:

Event

Attribute

Type

Description

Examples

id

string

String used as the event key

-

slug

string

String with 4 characters used with the publisher slug to identify the event

-

title

string

Event title

-

createdAt

timestamp

When the event was created

-

modifiedAt

timestamp

The last time the event was modified

-

eventStatus

string

The status

live

upcoming

done

location

string

Event location

-

dateAndTime

timestamp

Date and time the event starts

-

description

string

Event description

-

liveblogLayout

string

The layout defined for your event

timeline

no-timeline

card

language

string

Event language

en-us

pt-br

share

boolean

Flag to show if the post can be shared

-

pagination

number

Quantity of posts per page

-

timeFormat

string

Event time format

24h

12h

reactionType

string

The type of reaction allowed to your posts

none

thumbs-up-down

thumbs-up

claps


Post

Attribute

Type

Description

Examples

id

string

String used as the post key

-

title

string

Post title

-

showEditorName

boolean

Flag to show if the post can be shared

-

createdAt

timestamp

When the post was created

-

backgroundColor

string

Post background color

-

postType

number

Post type

1 (normal)

2 (pinned)

3 (summary)

editor

{

name: string,

image: string

}

Object with the editor data, where there is the name and profile image url.

-

Reach out to our support team if you have questions.

Happy to assist you!

Did this answer your question?