Example of a canvas object response

#1

Hi, it would be great if someone could provide a sample canvas object response which I have to send for a initialize request from the messenger. I went through the docs and found the format for only individual components and not the response as whole. Thanks

0 Likes

#2

Hi @mariappans,

You can find the Canvas response type in the Objects reference in the docs: https://intercom.tech-docs.io/reference/objects#canvas

There are two types of Canvas you can return, a Static Canvas:

{
  "canvas": {
    "content": {
      "version": "0.2.0",
      "components": [
        {
          "type": "text",
          "text": "Hello World!"
        }
      ]
    },
    "stored_data": {} #optional
  }
}

or a Live Canvas:

{
  "canvas": {
    "content_url": "https://messengerapp.com/get-content-here",
    "stored_data": {} #optional
  }
}

Hope that helps!

0 Likes

#3

Thanks. So just a quick question, in the “components” key I can give multiple components right? So If I want to place an input field below a text field how will I specify it?

0 Likes

#4

Yes the components key is an array of components, in the order in which you want to display them.

So for an input field below a text feild it would be something like:

{
  "canvas": {
    "content": {
      "version": "0.2.0",
      "components": [
        {
          "type": "text",
          "text": "Hello World!"
        },
        {
           "type": "input", 
           "id": "user_email_address",
           "label": "Enter your email address",
           "placeholder": "user@domain.com",
           "value": "peter@intercom.io",
           "action": {
             "type": "submit"
           }
        }
      ]
    },
    "stored_data": {} #optional
  }
}
1 Like