Send in-app messages using webhooks

You can use webhooks to send in-app messages through other platforms. Webhooks provide a way to access public APIs and services outside of Customer.io. We treat webhooks like messages: when someone reaches a webhook in your campaign, we’ll execute the webhook, accessing an external API. In this case, we’ll show you how to use webhooks to send in-app messages.

An in-app message is a message that targets a person currently using your app or website. In-app messages reach people after they open your app, helping you communicate with engaged members of your audience without bombarding them with notifications outside your app.

 We’re working on our own SDK with in-app messaging support!

Webhooks provide a transitional solution to mobile in-app messaging use cases. In the future, you’ll be able to use our SDK and send in-app notifications directly through Customer.io to mobile apps. Contact product@customer.io if you want to participate in a closed beta program.

Use a webhook to launch Appcues Flows

Appcues Flows are product tours or another series of in-app messages. If you set up your Appcues Flow to target an audience of Specific Users—a group of users bearing one or more properties—you can use a Customer.io webhook in your campaign to apply properties to people in Appcues, making them eligible to experience your Appcues Flow when they return to your site or app.

Before you get started, you’ll need your Appcues API credentials. People in your Customer.io workspace must have an AttributeA key-value pair containing that you associate with a person. Use attributes to target people and personalize messages. or IdentifierThe attributes you use to add, modify, and target people. Each unique identifier value represents an individual person in your workspace. (id or email) that maps to a person in your Appcues account so that you can associate people in Customer.io with the right Appcues users.

To set up a webhook that triggers a an Appcues Flow in your campaign:

  1. Add a Webhook to your workflow and click Add Request.

  2. Set the URL to https://api.appcues.com/v1/accounts/{account id}/users/{{customer.<attribute>}}/activity where:

    • {account id} is your account ID in Appcues.
    • <attribute> is the attribute that maps to your users' identifiers in Appcues.
  3. Make sure the method is set to POST.

  4. Click Add Header and enter Authorization for the name and bearer <your_appcues_api_key> for the value. Click here to find your Appcues API key

  5. Enter your payload. The property_name and property_value in the example payload below represent the name of the attribute and the value of the attribute that trigger your flow.

    {
        "profile_update": {
            "property_name": "property_value"
        }
    }
    
  6. (Optional) Test your webhook request! Under Results, select the person you want to send a test to, and then click Send test…. If your webhook is configured correctly, your request will expose your Appcues Flow to your test person.

  7. Click Save Changes. When you activate your campaign, your webhook will expose tours to people who progress to the webhook in your campaign.

Use a webhook to start Chameleon tours

Chameleon tours work like in-app messages, but, unlike other in-app messages, you don’t send a tour or experience: you trigger it. Your tour should be set up to trigger based on a the presence of one or more attributes. Our webhook will set an attribute on a person in a campaign, causing the tour to appear for that person.

To set an attribute on a person in Chameleon, you need to know their uid or id. You can store this value on an attribute in a person in Customer.io; or, if people in Customer.io have an id value that matches the id or uid values in Chameleon, you can use {{customer.id}} in your payload.

Before you begin, you must have:

  • mapped people from Customer.io to users in Chameleon.
  • a tour or experience that is triggered by a custom user property.
  • your Chameleon API token.

In the workflow for your campaign:

  1. Add a Webhook to your workflow and click Add Request.

  2. Set the URL to https://api.trychameleon.com/v3/observe/hooks/profiles.

  3. Make sure the method is set to POST.

  4. Click Add Header and enter X-Account-Secret for the name and enter your Chameleon API token for the value. Click here to find or generate your Chameleon API token.

  5. Enter your payload. In this case, because you’re setting a custom property on a user to trigger a tour or experience, the payload is relatively simple.

    {
        "uid": "{{customer.chameleon-uid}}", // chameleon-uid is an example
                                             // set the attribute that maps to 
                                             // your Chameleon UID
        "experience-triggering-property": "experience-triggering-value"
    }
    
  6. (Optional) Test your request! Under Results, select the person you want to send a test to, and then click Send test…. If your webhook is configured correctly, your request will expose your tour or experience to your test person.

  7. Click Save Changes. When you activate your campaign, your webhook will trigger tours and experiences for people who reach the webhook in your campaign.

Example webhook for Chameleon
Example webhook for Chameleon

Send in-app messages with Airship

To take advantage of Airship’s in-app messaging solution in Customer.io, you must:

  • integrate the Airship SDK in your app.
  • have your Airship App Key and Master Secret. You can find both in the Airship dashboard.
  • use the named_user feature in Airship.
  • create an attribute in Customer.io called named_user to that matches the Airship named user value. When you set up your webhook, you’ll use {{customer.named_user}} to make sure that your in-app message reaches the right person.

In the Workflow for your campaign:

  1. Add a Webhook to your workflow and click Add Request.

  2. Set the URL to https://go.airship.com/api/push.

  3. Click Add header. Enter Authorization for the Name and basic <base64-encoded credentials> for the Value. You can go here and enter your credentials in the format appKey:masterSecret to get your Base64-encoded authorization credentials.

  4. Click Add Header again and enter Content-Type for the Name and application/vnd.urbanairship+json; version=3; for the Value.

  5. Provide the payload for your in-app message. The example below has the basic information required by Airship’s API, but the in-app object can be much more complex. See Airship’s documentation to learn more. In our example, we have a customer attribute mapped directly to a named_user in Airship.

    {
        "audience": {
            // push to the specific user you want to message
            "named_user": "{{ customer.named_user }}"
        },
        // set the device types your audience might have
        "device_types": ["ios", "android"],
        "in-app": {
            "alert": "Your in-app message goes here",
            "display_type": "banner"
        }
    }
    
  6. (Optional) Test your request! Under Results, select the person you want to send a test to, and then click Send test…. If this person has a named_user attribute and your webhook is configured correctly, your request should send them a message.

  7. Click Save Changes. When you activate your campaign, your webhook will send in-app messages through Airship.

Example webhook for Airship in-app messages
Example webhook for Airship in-app messages
Copied to clipboard!