/tf-webhooks-demo

Demo of typeform webhooks integrating with Slack as example

Primary LanguageJavaScript

Typeform webhooks demo

Deploy

We'll walk though Typeform's webhooks, and for that we'll create a basic typeform integration with Slack. The integration consist on a typeform to suggest readings and post those suggestions in a Slack channel.

Create a typeform

Create a typeform with the following blocks:

  1. [email] [required] What is your email address?
  2. [website] [required] Which is the link of the reading(e.g. blog post, book)?
  3. [long text] Why do you think this is an interesting reading?

Now go to the webhooks panel, introduce a valid URL(e.g. http://example.org) and hit "test webhook", click in the request in the "Recent Requests" section . You will see a payload similar to this(you can see the content in some "beautifier" site like this):

{
  "event_id": "hQJi65uTRz",
  "event_type": "form_response",
  "form_response": {
    "form_id": "R5ZNfR",
    "token": "4969bac7b56e83a82ad060f0ae57faed",
    "submitted_at": "2017-04-01T15:03:07Z",
    "definition": {
      "id": "R5ZNfR",
      "title": "Reading suggestion box",
      "fields": [
        {
          "id": "EE0L",
          "title": "What is your email address?",
          "type": "email"
        },
        {
          "id": "TFzu",
          "title": "Which is the link of the reading(e.g. blog post, book)?",
          "type": "website"
        },
        {
          "id": "v3Zc",
          "title": "Why do you think this is an interesting reading",
          "type": "long_text"
        }
      ]
    },
    "answers": [
      {
        "type": "email",
        "email": "an_account@example.com",
        "field": {
          "id": "EE0L",
          "type": "email"
        }
      },
      {
        "type": "url",
        "url": "http://example-url.com",
        "field": {
          "id": "TFzu",
          "type": "website"
        }
      },
      {
        "type": "text",
        "text": "Lorem ipsum dolor",
        "field": {
          "id": "v3Zc",
          "type": "long_text"
        }
      }
    ]
  }
}

For the next step you'll need to know the information about the fields (form_response.definition.fields), in this example:

[
    {
      "id": "EE0L",
      "title": "What is your email address?",
      "type": "email"
    },
    {
      "id": "TFzu",
      "title": "Which is the link of the reading(e.g. blog post, book)?",
      "type": "website"
    },
    {
      "id": "v3Zc",
      "title": "Why do you think this is an interesting reading",
      "type": "long_text"
    }
]

Create a incoming webhook

Create an incoming webhook on the slack board where you want to post the suggestions.

Deploy application in Heroku

Go here and click on the "Deploy to Heroku button". Introduce required config:

  • SLACK_INCOMING_WEBHOOK: go to the incoming webhook that you just created and copy the "Webhook URL".
  • Fields IDs(EMAIL_ID, LINK_ID and DESCRIPTION_ID): search in the payload of the test the form definition and find the ID for all the fields, in our example the IDs are EE0L, TFzu and v3Zc.

When then done, click in "Manage app" button, "Settings" tab and search by "Your app can be found at"; this is the URL that you'll use as the endpoint for your webhooks.

Configure your typeform to send webhooks

To to your typeform webhooks settings(Configure->Webhooks). In destination paste the URL of your application and click on "Test Webhook", a message should be posted in the slack channel. Now enable the webhook and from now all the responses to your typeform will be posted in the Slack channel