๐Ÿงฐ
Connect with your Backend
When you want to provide users with information stored on your server, you can easily do so through our API Integration module.

How does API integration work?

Step - 1: Add an API

  • Refer to the Integration tab from Dashboard Sidebar and click on Add New API(Provide a name to the API as applicable for future reference).
  • You can select two types of methods:
    • GET Method: You should select this if you don't want all the customer data. Here you can add a header and a parameter to your API.
    • POST Method: You should select this if you want all the customer data. You will get the information of the customer that has triggered this. You can add a header and additional parameters to your API as well.
  • You can show the desired data through different blocks:
    • Text Block: Data is shown as plain text.
    • Image Block: Data is shown as an image.
    • Gallery Block: Data is shown in the form of a Gallery carousel (best suited to showcase products).
    • Buttons Block: Data is shown in the form of buttons for users to press and access.
    • Quick Reply Block: Data is shown on the floating buttons for users to press and access.
API integration is available in paid plans only.
Always use a secret header token to protect your API end from unwanted usage.

Step - 2: Add the API in Builder:

  1. 1.
    Text Block: When you add a โ€˜Text Blockโ€™ use โ€˜<<โ€™ on the text field and youโ€™ll see a list of all the APIs you have created. Select the suitable one.
  2. 2.
    Image Bloc: When you add an 'Image Block', you'll see the optionCreate an API image block. Click it and youโ€™ll see the list of APIs. Select the suitable one.
  3. 3.
    Gallery Block: When you add a โ€˜Gallery Blockโ€™, youโ€™ll see the option Create an API Gallery Item. Press on it and youโ€™ll see the list of APIs. Select the suitable one.
  4. 4.
    Button Block: When you add a โ€˜Button Blockโ€™, youโ€™ll see the option Create an API button. Press on it and youโ€™ll see the list of APIs. Select the suitable one.
  5. 5.
    Quick Reply Block: When you add a โ€˜Quick Reply Blockโ€™, you'll see the option Create an API button. Press on it and youโ€™ll see the list of APIs. Select the suitable one.
By using the blocks mentioned above, you can show the data fetched through an API. For different blocks on the Builder, hereโ€™s how you add the APIs:

Step - 3: Receive data in POST Request

If you use a POST request, your API endpoint will receive the following data format at the:
1
{
2
"uid": 1, #unique customer id
3
"platform_id": 1, #id of the channel
4
"bot_enabled": true|false,
5
"avatar": "" # url,
6
"first_name": "Lorem",
7
"last_name": "Ipsum",
8
"full_name": "Lorem Ipsum",
9
"gender": "male|female",
10
"timezone": 6.0,
11
"locale": "",
12
"language": "",
13
"phone": "",
14
"email": "",
15
"created_at": "2020-10-16 06:41:59.039735+00:00",
16
"last_message_text": "", # User's last message
17
"last_message_time": "",
18
...
19
# Key-Value pair depending on the saved attributes
20
}
Copied!
To get API request in your backend, you need to connect the channel.

Step - 4: Return data

For these APIs, to trigger any specific block, return the following data structure:
Text Block
Image Block
Buttons Block
Quick Reply Block
Gallery Block
1
{
2
"data": "text", # string - this will contain the actual data
3
"success": true/false, # boolean
4
"message": "Successful", # string - this can be used for keeping logs
5
"attributes": {
6
# optional key-value pair to save in customer data
7
},
8
"status": 200 # integer
9
}
Copied!
1
{
2
"data": {
3
"type": "image" | "audio" | "video", # string
4
"url": "https://amazon.com/pic.png" # string url (jpg or png preferred)
5
}, # - this will contain the actual data
6
"success": true/false, # boolean
7
"message": "Successful", # string - this can be used for keeping logs
8
"attributes": {
9
# optional key-value pair to save in customer data
10
},
11
"status": 200 # integer
12
}
Copied!
1
{
2
"data": [
3
{
4
"title": "Hello World", # string - button title
5
"type": "url", # string - "sequence"/"url"/"phone"
6
"extra": "extra payload", # string (optional)
7
"value": "https://getalice.ai/", # value of the button i.e. url, sequence_id
8
},...
9
]
10
"success": true/false, # boolean
11
"message": "Successful", # string
12
attributes": {
13
# optional key-value pair to save in customer data
14
},
15
"status": 200 # integer
16
}
Copied!
1
{
2
"data": [
3
{
4
"title": "Hello World", # string - button title
5
"type": "sequence", # string - "sequence"
6
"extra": "extra payload", # string (optional) i.e "movie_id=123&name=alice"
7
"value": 8082, # value of the button i.e. sequence_id
8
},...
9
]
10
"success": true/false, # boolean
11
"message": "Successful", # string
12
attributes": {
13
# optional key-value pair to save in customer data
14
},
15
"status": 200 # integer
16
}
Copied!
1
{
2
"data": [
3
{
4
"title": "Hello World", # string - gallery title
5
"subtitle: "Hello World", # string - gallery item subtitle
6
"image": "" # image url (optional)
7
"url": "" # redirection url (optional)
8
"buttons": [
9
{
10
"title": "Hello World", # string - button title
11
"type": "url", # string - "sequence"/"url"
12
"extra": "extra payload", # string (optional)
13
"value": "https://getalice.ai/", # value of the button i.e. url, sequence_id
14
}, ...
15
]
16
}, ...
17
]
18
"success": true/false, # boolean
19
"message": "Successful", # string
20
attributes": {
21
# optional key-value pair to save in customer data
22
},
23
"status": 200 # integer
24
}
Copied!
If you want to use newline in data, use \n
You can update customer attributes from your backend by passing data in the attributes key.
You need to return the data within 5 seconds.
Last modified 1mo ago