In-App Template Library

In-app templates can be a bit complicated. This page contains templates that you can copy into your workspace to get started, and even some components that you might want to use—like buttons, grids, etc.

How it works

An in-app message template provides your message layout and content, including text areas and images that you can customize when you create a message in Customer.io. But, because message templates are made of actions, blocks, grids, and so on, they can sometimes be hard to create. This page contains some templates that can help get you started.

To use one of these templates, you’ll can copy the code on this page into the Code View editor option in your in-app templates.

Before you get started, make sure that you’ve set up your Branding first! We set up our templates with default brand names. After you copy a template into your workspace, you can adjust it to fit your needs.

 Have you already set up in-app branding?

If you haven’t configured your in-app Branding settings, you might want to do that first. These templates will work with our default brand styles, but your Branding determines the colors, padding, and font styles—so your messages look like native parts of your app or website.

Create a message template...and use it in a campaign
Set up an in-app message
Set up an in-app message
use the message in a campaign
use the message in a campaign

Use a template on this page

Templates on this page use the default branding names and values. If you changed the names of your colors, text styles, or padding values, you may need to edit values after you copy one of the templates on this page to your workspace.

In any case, you’ll need to adjust the Text and Image components after you copy a template from this page to your workspace, to make the template fit the kind of message you want to send, your brand styles, your graphics, etc.

  1. Go to Settings > Workspace Settings > In-App Messages.
  2. Under Messages, click New Message or select the message you want to change.
  3. If you’re starting with a new message, we suggest you pick the Blank template. When you copy a template from this page, you’re probably going to replace the entire contents of your template anyway.
    start with a blank template
    start with a blank template
  4. Give your template a Name and click Create Message.
  5. In your new message click Code View.
    the code editor for in-app templates
    the code editor for in-app templates
  6. On this page, find the template you want to use click Copy above the code sample.
  7. Go back to your new message, and paste the code you copied, replacing the contents of the code editor. Make sure you replace the empty brackets that in the code editor!
    the code editor for in-app templates
    the code editor for in-app templates
  8. Now you can customize your template!

Customize your template

After you copy over a template, you can adjust the code manually—find and replace your branding options, images, etc. Or, you can switch to the Designer View and update your branding values that way.

In general, you’ll want to change the content of the Text, Image, and action components in your message. You can either replace values with the static text, or you can add variables—in the format $properties.variable-name that you can populate when you use your message template in a campaign.

Welcome message example

This example is a quick banner to welcome folks to your app and reminds the user of their purpose in downloading your app and signing up for your service. We’ve chosen an education example, and you should adjust your text accordingly.

There’s also a $properties.name value in the header. That generates a name field when you use your message in a campaign. In our example, we’ve populated the image with {{customer.first_name}}

in-app welcome example
in-app welcome example
[
  {
    "gist": {
      "id": "3e23dea0-6b50-465f-9564-c8576e8c300c",
      "designer": true,
      "description": "Message padding"
    },
    "type": "blockWidget",
    "components": [
      {
        "type": "blockWidget",
        "gist": {
          "id": "4b69fcdb-e3ea-441f-a65f-4f29c79b320c",
          "designer": true,
          "description": "Message frame"
        },
        "padding": [
          "Medium",
          "Medium",
          "Medium",
          "Medium"
        ],
        "backgroundColor": "Background",
        "borderRadius": 20,
        "components": [
          {
            "type": "fixedListWidget",
            "gist": {
              "id": "1bfd6c77-6d7f-40df-996c-fb84df53557b",
              "designer": false
            },
            "components": [
              {
                "type": "fixedHorizontalListWidget",
                "gist": {
                  "id": "d7f36f8d-a821-4e2f-b07d-0f29526e3405",
                  "designer": false
                },
                "components": [
                  {
                    "gist": {
                      "id": "2b37daed-ed69-4bf5-98c4-b65b8fb46ad5",
                      "designer": true,
                      "description": "Image padding"
                    },
                    "type": "blockWidget",
                    "components": [
                      {
                        "type": "imageWidget",
                        "gist": {
                          "id": "27bbbb59-1287-4d51-a907-8bdc75087c01",
                          "designer": true
                        },
                        "height": 50,
                        "width": 50,
                        "fit": "scaleDown",
                        "image": "https://assets.gist.build/ad338f4f-9bd0-4a33-8ed4-444ff8428867/assets/sales-9757a29458e7.png"
                      }
                    ],
                    "padding": [
                      "",
                      "",
                      "Small",
                      ""
                    ]
                  },
                  {
                    "gist": {
                      "id": "f66df0cd-3990-428c-a467-74e0218a8c75",
                      "designer": false
                    },
                    "type": "blockWidget",
                    "components": [
                      {
                        "gist": {
                          "id": "13e6cdff-1d81-48ab-8ad2-6d8a58c5496d",
                          "designer": true,
                          "description": "Body markdown"
                        },
                        "type": "markdownWidget",
                        "value": "Hey $properties.name!\n\n![welcome](https://c.tenor.com/JTLKZlNyuOwAAAAC/study.gif)\n\nWelcome! You're ready to take the first step toward learning a new language.\n",
                        "textColor": "Text",
                        "colorA": "Heading Text",
                        "textStyleP": "Body Medium",
                        "textStyleA": "Button"
                      }
                    ],
                    "flex": 1
                  },
                  {
                    "gist": {
                      "id": "f026f8e8-b4ce-497f-b895-75b1808d109e",
                      "designer": true,
                      "description": "Close button padding"
                    },
                    "type": "blockWidget",
                    "components": [
                      {
                        "gist": {
                          "id": "3f104b94-275a-4eb7-845a-f797f8039f40",
                          "designer": true,
                          "description": "Close button action"
                        },
                        "type": "actionWidget",
                        "component": {
                          "type": "imageWidget",
                          "gist": {
                            "id": "da958885-448a-496d-a5fb-af1d1456d613",
                            "designer": true
                          },
                          "image": "https://assets.gist.build/templates/images/padded-close.png",
                          "height": 30,
                          "width": 30,
                          "fit": "scaleDown",
                          "fadeInDuration": 100
                        },
                        "behaviour": "native",
                        "action": "gist://close"
                      }
                    ],
                    "padding": [
                      "Small",
                      "",
                      "",
                      ""
                    ]
                  }
                ],
                "mainAxisAlignment": "spaceBetween"
              },
              {
                "gist": {
                  "id": "91eac25e-078b-426a-bb21-b97285358cea",
                  "designer": true,
                  "description": "Button padding"
                },
                "type": "blockWidget",
                "components": [
                  {
                    "gist": {
                      "id": "5b67ff02-bf6c-4807-8914-bb89794a3965",
                      "designer": true,
                      "description": "Button action"
                    },
                    "type": "actionWidget",
                    "component": {
                      "gist": {
                        "id": "b2abe969-3452-4429-b826-f860782982a6",
                        "designer": true,
                        "description": "Button style"
                      },
                      "type": "blockWidget",
                      "components": [
                        {
                          "type": "textWidget",
                          "gist": {
                            "id": "706e53e5-4be4-47de-b274-b59a8e50c798",
                            "designer": true
                          },
                          "style": "Button",
                          "color": "Button Text",
                          "textAlign": "center",
                          "text": "Get Started"
                        }
                      ],
                      "backgroundColor": "Button Background",
                      "padding": [
                        "Medium",
                        "Medium",
                        "Medium",
                        "Medium"
                      ],
                      "borderRadius": 40
                    },
                    "behaviour": "system",
                    "action": "https://customer.io/docs/in-app-getting-started/"
                  }
                ],
                "padding": [
                  "",
                  "Medium",
                  "",
                  ""
                ]
              }
            ],
            "crossAxisAlignment": "stretch"
          }
        ],
        "borderColor": "Borders",
        "borderWidth": 2
      }
    ],
    "padding": [
      "Medium",
      "Medium",
      "Medium",
      "Medium"
    ]
  }
]

Announcement message example

This is a sample announcement with static heading and body text. You’ll want to modify the text and images to fit your use case, but you can make an all-purpose announcement message by replacing the text fields with $properties.heading and $properties.body; this will generate heading and body fields in the preview when you use this message template.

in-app announcement example
in-app announcement example
[
    {
      "type": "blockWidget",
      "padding": [
        "Small",
        "",
        "Small",
        ""
      ],
      "components": [
        {
          "type": "blockWidget",
          "backgroundColor": "Background",
          "borderRadius": 10,
          "components": [
            {
              "type": "fixedListWidget",
              "crossAxisAlignment": "stretch",
              "components": [
                {
                  "type": "blockWidget",
                  "padding": [
                    "",
                    "",
                    "",
                    "Extra Large"
                  ],
                  "components": [
                    {
                      "type": "imageWidget",
                      "gist": {
                        "designer": true,
                        "id": "702127f5-eadb-402c-ab27-4a33bec6bdf5"
                      },
                      "image": "https://assets.gist.build/templates/images/placeholder-wide.png",
                      "fit": "cover",
                      "fadeInDuration": 200,
                      "height": 200
                    }
                  ],
                  "gist": {
                    "id": "8d8a46c8-6d12-49a7-b457-b7e6c1ee3082",
                    "designer": true,
                    "description": "Image padding"
                  }
                },
                {
                  "type": "blockWidget",
                  "padding": [
                    "Large",
                    "",
                    "Large",
                    "Extra Large"
                  ],
                  "components": [
                    {
                      "gist": {
                        "designer": true,
                        "id": "ced13d97-46b0-438a-bd2a-c615aa716b65"
                      },
                      "type": "textWidget",
                      "color": "Heading Text",
                      "style": "Heading Large",
                      "textAlign": "left",
                      "text": "Announcing something new! 📣"
                    }
                  ],
                  "gist": {
                    "id": "21474a9b-b587-4576-99e6-7cec1d5eb9a6",
                    "designer": true,
                    "description": "Title padding"
                  }
                },
                {
                  "type": "blockWidget",
                  "padding": [
                    "Large",
                    "",
                    "Large",
                    "Extra Large"
                  ],
                  "components": [
                    {
                      "gist": {
                        "designer": true,
                        "id": "400f321a-fa4b-4faf-bff5-ff994a756e69"
                      },
                      "type": "textWidget",
                      "color": "Text",
                      "text": "This is a very important announcement we're making to all our customers. Actually this is some example text to demo the message.",
                      "style": "Body Large"
                    }
                  ],
                  "gist": {
                    "id": "51b87ffb-773d-44d4-bb91-66a77a8f2cd0",
                    "designer": true,
                    "description": "Body padding"
                  }
                },
                {
                  "type": "blockWidget",
                  "padding": [
                    "Large",
                    "",
                    "Large",
                    "Extra Large"
                  ],
                  "components": [
                    {
                      "gist": {
                        "designer": true,
                        "id": "168369d7-dae0-40be-af9b-8a432af8f5fb",
                        "description": "Button action"
                      },
                      "type": "actionWidget",
                      "action": "gist://close",
                      "behaviour": "native",
                      "component": {
                        "type": "blockWidget",
                        "padding": [
                          "Medium",
                          "Medium",
                          "Medium",
                          "Medium"
                        ],
                        "components": [
                          {
                            "gist": {
                              "designer": true,
                              "id": "df0246e1-5c66-4ced-a614-fad57de3c200"
                            },
                            "type": "textWidget",
                            "text": "Awesome!",
                            "style": "Button",
                            "color": "Button Text",
                            "textAlign": "center"
                          }
                        ],
                        "backgroundColor": "Button Background",
                        "borderRadius": 10,
                        "gist": {
                          "id": "2113573a-a5dd-42a2-a968-e8d7b6649df0",
                          "designer": true,
                          "description": "Button style"
                        }
                      }
                    }
                  ],
                  "gist": {
                    "id": "c34c1714-1454-4c24-b8e1-451073053be4",
                    "designer": true,
                    "description": "Button padding"
                  }
                }
              ],
              "gist": {
                "id": "46a4b4f1-2dbe-4e28-adce-1e684df17fab",
                "designer": true
              }
            }
          ],
          "gist": {
            "id": "3f3425a6-722e-460a-ad41-379e8f6a145c",
            "designer": true,
            "description": "Message frame"
          }
        }
      ],
      "gist": {
        "id": "9bf3d63a-188a-4166-a70c-140e05666bd3",
        "designer": true,
        "description": "Message padding"
      }
    }
  ]

This is a simple banner example. Something you can show anywhere in your app that’s not very intrusive but might let customers know about a new feature, something they’ve missed, an update to your app, and so on.

This example doesn’t contain any templated fields. If you want to customize the message when you use it in a campaign or broadcast, you can replace the contents of the text component(s) with $properties.<name-of-your-field>.

Set up an in-app message
Set up an in-app message
[
    {
      "type": "blockWidget",
      "gist": {
        "id": "1a8eecd9-17ce-4d58-8a00-53ea29ab26e6",
        "designer": true,
        "description": "Banner frame"
      },
      "backgroundColor": "Button Background",
      "components": [
        {
          "gist": {
            "id": "ae34a06b-741b-468e-8235-18dc6a3a20a9",
            "designer": true,
            "description": "Text padding"
          },
          "type": "blockWidget",
          "components": [
            {
              "type": "fixedHorizontalListWidget",
              "gist": {
                "designer": true,
                "id": "9eb8eedb-eec5-42b1-9bb9-6ffcad67db9b"
              },
              "components": [
                {
                  "gist": {
                    "id": "03d33e4b-0851-4b0b-b4bf-aaeaeddb1be1",
                    "designer": true
                  },
                  "type": "blockWidget",
                  "components": [
                    {
                      "type": "fixedHorizontalListWidget",
                      "gist": {
                        "id": "4c5a2297-136e-4864-9588-fd6392617d16",
                        "designer": true,
                        "description": "Banner text position"
                      },
                      "components": [
                        {
                          "type": "blockWidget",
                          "gist": {
                            "id": "e987f2ed-9bf6-4722-a22c-4b25b98a1909",
                            "designer": true
                          },
                          "components": [
                            {
                              "gist": {
                                "id": "6317ef61-1129-4ec5-9feb-e649e73fd1f8",
                                "designer": true,
                                "description": "Banner markdown"
                              },
                              "type": "markdownWidget",
                              "value": "👋 Hello! You can personalise this space with any message. Once you're done, send it via a Broadcast or to an individual user. [Learn more!](https://customer.io/docs/in-app-getting-started/)",
                              "textColor": "Button Text",
                              "headingColor": "Button Text",
                              "textStyleA": "Button",
                              "colorA": "Button Text",
                              "textStyleP": "Body Large"
                            }
                          ],
                          "flex": 1
                        }
                      ],
                      "mainAxisAlignment": "spaceAround"
                    }
                  ],
                  "flex": 1
                },
                {
                  "gist": {
                    "id": "b4cfb3e3-3694-449e-9fb2-c4da27022e3b",
                    "designer": true,
                    "description": "Close button padding"
                  },
                  "type": "blockWidget",
                  "components": [
                    {
                      "gist": {
                        "id": "a06d7414-630f-42d4-ab42-f1f8a95d1307",
                        "designer": true,
                        "description": "Close button action"
                      },
                      "type": "actionWidget",
                      "component": {
                        "type": "imageWidget",
                        "gist": {
                          "id": "40dc4658-f179-4c50-a42e-d09714ffb594",
                          "designer": true
                        },
                        "image": "https://assets.gist.build/templates/images/padded-close-white.png",
                        "height": 30,
                        "width": 30,
                        "fit": "scaleDown",
                        "fadeInDuration": 100
                      },
                      "behaviour": "native",
                      "action": "gist://close"
                    }
                  ],
                  "padding": [
                    "Small",
                    "",
                    "",
                    ""
                  ]
                }
              ]
            }
          ],
          "padding": [
            "Medium",
            "Medium",
            "Medium",
            "Medium"
          ]
        }
      ]
    }
  ]

Announcement with liquid text example

This announcement example shows what you can do when you turn all of your message content into variables. The preview looks pretty boring, but you’ll find a populated version below: all the image and text components for this template use variables ($property.<var>) that you can populate when you use this template in a campaign or broadcast.

Here’s what this template looks like when you use it in a campaign and populate all the fields.

A populated announcement template
A populated announcement template
Set up an in-app message
Set up an in-app message
[
    {
      "type": "blockWidget",
      "padding": [
        "Small",
        "",
        "Small",
        ""
      ],
      "components": [
        {
          "type": "blockWidget",
          "backgroundColor": "Background",
          "borderRadius": 10,
          "components": [
            {
              "type": "fixedListWidget",
              "crossAxisAlignment": "stretch",
              "components": [
                {
                  "type": "blockWidget",
                  "padding": [
                    "",
                    "",
                    "",
                    "Extra Large"
                  ],
                  "components": [
                    {
                      "type": "imageWidget",
                      "gist": {
                        "designer": true,
                        "id": "0f76aa13-299f-42fb-95fb-93e0d2072405"
                      },
                      "image": "$properties.image_url",
                      "fit": "cover",
                      "fadeInDuration": 200,
                      "height": 200
                    }
                  ],
                  "gist": {
                    "id": "e62d0c34-6db3-4497-b0b5-d13c060d13fe",
                    "designer": true,
                    "description": "Image padding"
                  }
                },
                {
                  "type": "blockWidget",
                  "padding": [
                    "Large",
                    "",
                    "Large",
                    "Extra Large"
                  ],
                  "components": [
                    {
                      "gist": {
                        "designer": true,
                        "id": "1e9ad275-f204-4f4c-8342-799168bba837"
                      },
                      "type": "textWidget",
                      "color": "Heading Text",
                      "style": "Heading Large",
                      "textAlign": "left",
                      "text": "$properties.text"
                    }
                  ],
                  "gist": {
                    "id": "b938d118-ca1d-47df-a259-1b2a98683fb5",
                    "designer": true,
                    "description": "Title padding"
                  }
                },
                {
                  "type": "blockWidget",
                  "padding": [
                    "Large",
                    "",
                    "Large",
                    "Extra Large"
                  ],
                  "components": [
                    {
                      "gist": {
                        "designer": true,
                        "id": "45880709-c889-4ea2-b2fc-96d88da016e0"
                      },
                      "type": "textWidget",
                      "color": "Text",
                      "text": "$properties.description",
                      "style": "Body Large"
                    }
                  ],
                  "gist": {
                    "id": "bade5c2e-6bed-4ec6-9c70-6e0f59393969",
                    "designer": true,
                    "description": "Body padding"
                  }
                },
                {
                  "type": "blockWidget",
                  "padding": [
                    "Large",
                    "",
                    "Large",
                    "Extra Large"
                  ],
                  "components": [
                    {
                      "gist": {
                        "designer": true,
                        "id": "b38e5239-9aaa-4a23-9114-8b72b19c4e06",
                        "description": "Button action"
                      },
                      "type": "actionWidget",
                      "behaviour": "native",
                      "component": {
                        "type": "blockWidget",
                        "padding": [
                          "Medium",
                          "Medium",
                          "Medium",
                          "Medium"
                        ],
                        "components": [
                          {
                            "gist": {
                              "designer": true,
                              "id": "eea0fc0b-829e-4d84-9e38-799f74c109a2"
                            },
                            "type": "textWidget",
                            "text": "$properties.cta_text",
                            "style": "Button",
                            "color": "Button Text",
                            "textAlign": "center"
                          }
                        ],
                        "backgroundColor": "Button Background",
                        "borderRadius": 10,
                        "gist": {
                          "id": "e74e83fb-02cf-4992-9865-26ba34441a71",
                          "designer": true,
                          "description": "Button style"
                        }
                      },
                      "action": "gist://loadPage?url=$properties.cta_url"
                    }
                  ],
                  "gist": {
                    "id": "2521e9a3-5406-4ba7-a7cd-7d3206bfb636",
                    "designer": true,
                    "description": "Button padding"
                  }
                }
              ],
              "gist": {
                "id": "bac3ba58-23f4-41f4-9887-6d6392bdb216",
                "designer": true
              }
            }
          ],
          "gist": {
            "id": "ac3bc543-fd45-4b3a-a70a-03b840e8a569",
            "designer": true,
            "description": "Message frame"
          }
        }
      ],
      "gist": {
        "id": "77f3868c-1d9e-4008-8207-df8237591538",
        "designer": true,
        "description": "Message padding"
      }
    }
  ]

Push opt-in example #1

This is an example that you can use to opt people into push notifications. Note that the Enable Push action is set to Application and an enable_push_event value. You should replace this value with whatever value you’ll pass to your app, and the Customer.io SDK, to enable push notifications.

Set up an in-app message
Set up an in-app message
[
  {
    "type": "blockWidget",
    "gist": {
      "id": "45bee540-16ed-46bf-bafd-18d966c1f0e4",
      "designer": true
    },
    "components": [
      {
        "type": "blockWidget",
        "gist": {
          "id": "1e595e2e-71e2-4611-bc00-a6137b3e1364",
          "designer": true
        },
        "components": [
          {
            "type": "fixedListWidget",
            "gist": {
              "id": "f49276d7-eb64-4657-a80c-ed7460309ac4",
              "designer": true
            },
            "components": [
              {
                "type": "fixedHorizontalListWidget",
                "gist": {
                  "id": "2f61b516-0bdf-4100-a230-3ec65a970fba",
                  "designer": true
                },
                "components": [
                  {
                    "type": "actionWidget",
                    "gist": {
                      "id": "5ff60627-662d-408c-9202-a28ccd499f6b",
                      "designer": true
                    },
                    "action": "gist://close",
                    "behaviour": "native",
                    "component": {
                      "type": "imageWidget",
                      "gist": {
                        "id": "e5ecda18-16d8-4ae3-afb2-50e3defdb73e",
                        "designer": true
                      },
                      "image": "https://assets.gist.build/templates/images/padded-close.png",
                      "fit": "scaleDown",
                      "height": 35,
                      "width": 35
                    }
                  }
                ],
                "mainAxisAlignment": "end"
              },
              {
                "type": "textWidget",
                "gist": {
                  "id": "ebf22585-34f5-44d3-90fb-48b9994d229a",
                  "designer": true
                },
                "style": "Heading Large",
                "color": "Heading Text",
                "text": "Get updates",
                "textAlign": "center"
              },
              {
                "gist": {
                  "id": "e262afb3-78ad-4f6b-849b-5b2e67447242",
                  "designer": true
                },
                "type": "blockWidget",
                "components": [
                  {
                    "type": "textWidget",
                    "gist": {
                      "id": "aaaff1bd-50ce-45c8-b6e9-c00447ebbe65",
                      "designer": true
                    },
                    "text": "Enable push notifications to receive alerts when your order status changes.",
                    "style": "Body Large",
                    "color": "Text",
                    "textAlign": "center"
                  }
                ],
                "padding": [
                  "",
                  "Small",
                  "",
                  "Medium"
                ]
              },
              {
                "type": "fixedHorizontalListWidget",
                "gist": {
                  "id": "dad3463f-a102-4e4b-8b9e-e461faf641ce",
                  "designer": true
                },
                "components": [
                  {
                    "type": "actionWidget",
                    "gist": {
                      "id": "38b3f2cd-59d4-4125-8bed-f7837633f70c",
                      "designer": true
                    },
                    "component": {
                      "type": "blockWidget",
                      "gist": {
                        "id": "007b6683-aab9-4440-a3ab-abffdc3bc9cf",
                        "designer": true
                      },
                      "components": [
                        {
                          "type": "textWidget",
                          "gist": {
                            "id": "d5b4ea88-a02f-40f3-a76f-29d752075734",
                            "designer": true
                          },
                          "text": "No thanks",
                          "style": "Button",
                          "color": "Button Background"
                        }
                      ],
                      "backgroundColor": "Background",
                      "padding": [
                        "Extra Large",
                        "Small",
                        "Extra Large",
                        "Small"
                      ],
                      "borderRadius": 4,
                      "borderColor": "Button Background",
                      "borderWidth": 1
                    },
                    "action": "gist://close",
                    "behaviour": "native"
                  },
                  {
                    "type": "actionWidget",
                    "gist": {
                      "id": "9cbcce98-a2ea-40c2-bebe-9e09bdeb4393",
                      "designer": true
                    },
                    "component": {
                      "type": "blockWidget",
                      "gist": {
                        "id": "17a92912-3738-4701-880c-53ffbbffffa6",
                        "designer": true
                      },
                      "components": [
                        {
                          "type": "textWidget",
                          "gist": {
                            "id": "635adb32-b605-48c1-ad8d-6b242ce7f753",
                            "designer": true
                          },
                          "text": "Enable Push",
                          "style": "Button",
                          "color": "Button Text"
                        }
                      ],
                      "backgroundColor": "Button Background",
                      "padding": [
                        "Extra Large",
                        "Small",
                        "Extra Large",
                        "Small"
                      ],
                      "borderRadius": 4,
                      "borderColor": "Button Background",
                      "borderWidth": 1
                    },
                    "behaviour": "native",
                    "action": "enable_push_event"
                  }
                ],
                "mainAxisAlignment": "spaceEvenly",
                "crossAxisAlignment": "center"
              }
            ],
            "crossAxisAlignment": "center"
          }
        ],
        "backgroundColor": "Background",
        "padding": [
          "Medium",
          "Medium",
          "Medium",
          "Extra Large"
        ]
      }
    ]
  }
]

Push opt-in example #2

This is an example that you can use to opt people into push notifications. Note that the Enable Push action is set to Application and an enable_push_event value. You should replace this value with whatever value you’ll pass to your app, and the Customer.io SDK, to enable push notifications.

Set up an in-app message
Set up an in-app message
[
  {
    "type": "blockWidget",
    "gist": {
      "id": "caf7019b-66d2-4964-8cbd-eee153976a7f",
      "designer": true
    },
    "components": [
      {
        "type": "blockWidget",
        "gist": {
          "id": "ebe24533-4c8b-42f5-91e7-df8644ca3124",
          "designer": true
        },
        "components": [
          {
            "type": "fixedListWidget",
            "gist": {
              "id": "ef74a2dd-a5ae-48a0-be71-b1ed25778abd",
              "designer": true
            },
            "components": [
              {
                "type": "fixedHorizontalListWidget",
                "gist": {
                  "id": "8281c56d-e75a-4069-8da0-766ff67605b7",
                  "designer": true
                },
                "components": [
                  {
                    "type": "actionWidget",
                    "gist": {
                      "id": "53d2474a-49fd-45c4-ab7e-d8661ea1f826",
                      "designer": true
                    },
                    "action": "gist://close",
                    "behaviour": "native",
                    "component": {
                      "type": "imageWidget",
                      "gist": {
                        "id": "ac4cfaec-cd33-4c3b-9bdc-8bcde284ba22",
                        "designer": true
                      },
                      "image": "https://assets.gist.build/templates/images/padded-close.png",
                      "fit": "scaleDown",
                      "height": 30,
                      "width": 30
                    }
                  }
                ],
                "mainAxisAlignment": "end"
              },
              {
                "type": "textWidget",
                "gist": {
                  "id": "fb9ecad7-9090-483e-9eec-4ca11cef091b",
                  "designer": true
                },
                "style": "Heading Large",
                "color": "Heading Text",
                "text": "Get updates",
                "textAlign": "center"
              },
              {
                "gist": {
                  "id": "33817bb1-7587-4602-a269-25a5a6d647f2",
                  "designer": true
                },
                "type": "blockWidget",
                "components": [
                  {
                    "type": "textWidget",
                    "gist": {
                      "id": "f01de1da-fb69-4112-a7b6-a86bdd881688",
                      "designer": true
                    },
                    "text": "Enable push notifications to receive alerts when your order status changes.",
                    "style": "Body Large",
                    "color": "Text",
                    "textAlign": "center"
                  }
                ],
                "padding": [
                  "",
                  "Small",
                  "",
                  "Medium"
                ]
              },
              {
                "type": "fixedListWidget",
                "gist": {
                  "id": "b4aed24d-576e-4a8e-8916-41fc444728c5",
                  "designer": true
                },
                "components": [
                  {
                    "type": "actionWidget",
                    "gist": {
                      "id": "a8889471-80d1-4f4f-9f46-2c57c22cd1ec",
                      "designer": true
                    },
                    "component": {
                      "type": "blockWidget",
                      "gist": {
                        "id": "f7a0e7cf-e8eb-45ca-831c-3ce4052dc284",
                        "designer": true
                      },
                      "components": [
                        {
                          "type": "textWidget",
                          "gist": {
                            "id": "904427c6-c9a9-49a6-9404-6669f60b6db6",
                            "designer": true
                          },
                          "text": "Enable Push",
                          "style": "Button",
                          "color": "Button Text"
                        }
                      ],
                      "backgroundColor": "Button Background",
                      "padding": [
                        "Extra Large",
                        "Medium",
                        "Extra Large",
                        "Medium"
                      ],
                      "borderRadius": 4,
                      "borderColor": "Button",
                      "borderWidth": 1
                    },
                    "behaviour": "native",
                    "action": "enable_push_event"
                  },
                  {
                    "type": "actionWidget",
                    "gist": {
                      "id": "389a5913-2eb9-464a-b031-49a2147be365",
                      "designer": true
                    },
                    "component": {
                      "type": "blockWidget",
                      "gist": {
                        "id": "7de659e5-b732-4a8f-8d5a-c4c0e14808ee",
                        "designer": true
                      },
                      "components": [
                        {
                          "type": "textWidget",
                          "gist": {
                            "id": "38093bbb-6536-4b14-b0b3-291e5d3c23c1",
                            "designer": true
                          },
                          "text": "Dismiss",
                          "style": "Body Large",
                          "color": "Button Background"
                        }
                      ],
                      "backgroundColor": "Background",
                      "padding": [
                        "Extra Large",
                        "Medium",
                        "Extra Large",
                        "Small"
                      ],
                      "borderRadius": 4,
                      "borderWidth": 1
                    },
                    "action": "gist://close",
                    "behaviour": "native"
                  }
                ],
                "mainAxisAlignment": "spaceEvenly",
                "crossAxisAlignment": "center"
              }
            ],
            "crossAxisAlignment": "center"
          }
        ],
        "backgroundColor": "Background",
        "padding": [
          "Medium",
          "Medium",
          "Medium",
          "Medium"
        ]
      }
    ]
  }
]
Copied to clipboard!
Is this page helpful?