Customizable webhook examples: Slack integration

On this page we'll walk you through an example of setting up customizable webhooks to connect Dynamic Content with Slack. When the user creates or updates a content item in Dynamic Content, a message will be posted in a channel on Slack.

This example demonstrates:

  • Sending data from Dynamic Content to a Slack app that is configured to accept incoming webhooks.
  • Using the custom payloads feature to send the data in the format defined by Slack.

We'll walk you through setting up and testing out this example integration step by step.

Pre-requisites

  • A Slack account
  • A Dynamic Content account with the Developer persona that allows you to create webhooks

This example is designed to work with the payloads generated from the "content item - created" or "content item- updated" webhook events. For these webhook events, the webhook payload will contain the content item that was created or updated. In the handlebars used to generate the custom payload, we check payload.body for a property named text or one named image and generate the custom payload to include these properties.

You can edit the handlebars to include references to properties in your own content type schemas or use our example content type schemas.

Before you begin: configure a Slack app

In Slack create an app if you don't already have one set up. This app must be configured to accept incoming webhooks (1 in the image below).

When the app is added to your chosen Slack workspace and configured for Webhooks, a Webhook URL will be generated (2). This is the URL you'll specify when creating a Webhook in Dynamic Content.

Copy the URL to the clipboard.

Set up an app in Slack to accept incoming webhooks
Set up an app in Slack to accept incoming webhooks

Step 1: Create a webhook

Choose "Webhooks" from the Development menu and click the "Add webhook" button. Give the webhook a label and paste the webhook URL generated by Slack into the URL field.

Set "Content item- created" and "Content item- updated" as the webhook triggers as shown in the image below.

Create a webhook in Dynamic Content with the Slack app webhook URL
Create a webhook in Dynamic Content with the Slack app webhook URL

Step 2: Add a custom payload

In the payload section choose the "Custom" radio button and add the following handlebars in the custom payload box. This handlebars is used to generate the custom payload included in the body of the webhook request.

If you want to use your own content type schema, then ensure it includes properties named image and imageAltText for an image content type or text for a text content type. Alternatively, you can edit the handlebars shown below.

{
    "blocks": [
    {
        "type": "section",
        "text": {
            "type": "mrkdwn",
            "text": "{{#eq dynamic-content.content-item.created }}Content Item Created: {{else}}Content Item updated: {{/eq}}{{payload.label}}"
        }
    },
    {
        "type": "context",
        "elements": [
            {
                "type": "mrkdwn",
                "text": "Schema: {{payload.body._meta.schema}}"
            }
        ]
    },
    {{#if payload.body.text}}
    {
        "type": "section",
        "text": {
            "type": "mrkdwn",
            "text": {{{JSONstringify payload.body.text}}}
        }
    }
    {{/if}}
    {{#if payload.body.image}}
    {
        "type": "section",
        "text": {
            "type": "mrkdwn",
            "text": "{{payload.label}}"
        },
        "accessory": {
            "type": "image",
            "image_url": "https://{{payload.body.image.defaultHost}}/i/{{payload.body.image.endpoint}}/{{payload.body.image.name}}",
            "alt_text": "{{payload.body.imageAltText}}"
        }
    }
    {{/if}}
    ]
}

When payload has been added, click the "Save" button at the top of the window to create the webhook.

Add the handlebars to generate the custom payload for the Slack message
Add the handlebars to generate the custom payload for the Slack message

Step 3: Create a content item

In the production view, create or update a content item using the image or text block content type. When you Save the content item, the webhook you created in Step 2 will be triggered.

In the example below we're creating a content item containing an image.

Create an image item
Create an image item

Step 4: View the webhook activity log

Choose "Webhooks" from the Development menu and double click the Slack example webhook to open it. Click "Activity log"(1 in the image below) and in the "Recent deliveries" section you should see a new entry showing that the webhook has been successfully triggered.

Click "View details" (2) to view the request and response.

The Custom payload section shows the handlebars that was used to generate the payload for this invocation of the webhook request
The Custom payload section shows the handlebars that was used to generate the payload for this invocation of the webhook request

In the webhook details, the status is "200 OK", indicating that the webhook was received and processed by Slack.

The Custom payload section shows the handlebars that was used to generate the custom payload for this webhook request.

The image URL is included in the custom payload
The image URL is included in the custom payload

The webhook body contains the custom payload including the image URL.

The image URL is included in the custom payload
The image URL is included in the custom payload

Step 5: View the result in the Slack channel

Now go to your Slack channel. You should see the message that was generated from the custom payload.

A message will be added to the Slack channel including the image and the alt text.

The image is shown in a new Slack message
The image is shown in a new Slack message

Content type schemas used in the example

The content type schemas used to demonstrate this webhook integration are included below. You can register these using the schema editor.

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "$id": "http://docexample.textblock.json",

    "title": "Title",
    "description": "Description",

    "allOf": [
        {
            "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
        }
    ],

    "type": "object",
    "properties": {
        "text": {
            "title": "Some text",
            "description": "Enter some text here",
            "type": "string",
            "format": "markdown"
        }

    },
    "propertyOrder": []
}
{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "$id": "http://www.example.com/simpleimage.json",

    "title": "Title",
    "description": "Description",

    "allOf": [
        {
            "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
        }
    ],

    "type": "object",
    "properties": {
        "image": {
            "title": "chooseimage",
            "description": "Choose an image",
            "allOf": [
                { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link" }
            ]
        },
        "imageAltText": {
            "title": "alttext",
            "description": "Enter text to use instead of the image",
            "type": "string",
            "minLength": 0,
            "maxLength": 50
        }

    },
    "propertyOrder": []
}

Webhooks overview

Customizable webhooks

Webhook payloads

results matching ""

    No results matching ""