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 role assigned for the hub in which you want 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.

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.

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. These handlebars are 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.

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.

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.

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 webhook body contains the custom payload including the image URL.

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.

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.

Below is the text block content type schema used in this example:

{
  "$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": []
}

Below is the image content type schema used in this example:

{
  "$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": []
}

Related pages

Webhooks overview

Customizable webhooks

Webhook payloads