Acquire cards are used to place containers around the respective set of information. The cards allow data display of external systems to be shown within the unified view of the Acquire. Acquire cards appear within the middle and right hand positions of the dashboard.
Acquire has 2 types of cards app-custom-cards and manual-cards. Once the Acquire card is configured correctly, your external system information will appear in the Acquire Agent's dashboard.
Acquire card designs are fully customizable. This document explains how to customize the design using Acquire components templates or custom HTML.
Card configuration is incredibly easy for developers who are conversant in standard technologies for creating cards. To send a card data through your incoming endpoint, you post a JSON or Custom HTML to the endpoint URL. This JSON or HTML containing inputs, labels, multi-select, or tabular data more.
You use the Acquire and manage orders on an external system but the agent wants to see the status of the particular contact's order, then the agent can view, change the information in the Acquire dashboard without switching through the card.
At the time of sending data through these cards, customer name, email, phone and other fields will be received from the Acquire, you can get that customer data from external systems.
####Editing:
The Acquire Card provides end-user data editing, card editing is done within the same HTML that you just have returned from initialize_url URL.
- Default template
- Custom HTML
- Timeline-cards (Middle of agent dashboard)
- Exclusive-cards (Right-side of agent dashboard)
You must add an API endpoint that responds to GET requests with a query and returns a JSON payload. In return, you can send a default template or custom HTML. Examples of default templates are given below.
- Go to AppStore.
- Click on Custom Card App & Install.
- Add your API endpoint URL in the app settings to get the information on the card. Apart from this, you can also add an optional Authorization Header(Basic Auth or Bearer).
Example: https://example.com/user?email={{contact.email}}&field={{contact.custom_field_key}}this endpoint URL Acquire will call for dynamic data and It can return the default template or custom HTML. - Add the default template or custom HTML, that will provide information from external systems.
app.post("/card-initialize", (req, res, next) => {
console.log('contact-information', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"type": "card",
"style": "single",
"items": [
{
"type": "item",
"title": "Judi Colton",
"subtitle": "Tech Head, California",
"bordered": true,
"align": "center",
"image": {
"url": "https://cdn.pixabay.com/photo/2015/03/03/18/58/girl-657753_960_720.jpg",
"height": 300
},
"action": {
"type": "url",
"url": "https://google.com/0"
},
"text": [
{
"type": "text",
"text": "This is paragraph text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"displayStyle": "paragraph"
},
{
"type": "text",
"text": "This is muted text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"style": "muted"
},
{
"type": "text",
"text": "This is error text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"style": "error"
},
{
"type": "text",
"text": "This is error text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"style": "success"
}
],
"buttons": [
{
"type": "button",
"label": "Muted button",
"style": "muted",
"action": {
"type": "url",
"url": "https://google.com/5"
}
},
{
"type": "button",
"label": "Error button",
"style": "error",
"action": {
"type": "url",
"url": "https://google.com/6"
}
},
{
"type": "button",
"label": "Success button",
"style": "success",
"action": {
"type": "url",
"url": "https://google.com/7"
}
}
]
}
]
}
]
}
}
});
});
To create manual cards:
-
First of all, you have to configure the Acquire Card space & location. It can be done by using create card API. Make sure that you have added the
initialize_urlendpoint URL properly. At this endpoint you will get contact data and you can return a customized template or HTML with the data. -
Create and return JSON template or custom HTML from your endpoint
initialize_url. -
The JSON template or HTML sent from your endpoint url will render on the agent dashboard.
var request = require('request');
var options = {
'method': 'POST',
'url': 'https://{{YOUR_ACQUIRE_ACCOUNT_URL}}/api/v1/crm/ui-component',
'headers': {
'Authorization': 'Bearer {{YOUR_API_KEY}}',
'Content-Type': 'application/json'
},
body: JSON.stringify({"type":"tab","config":{"label":"Sample Card","canvas":{"content_url":true},"action_key":"test-json","action_type":"initialize_tab","iconImageUrl":"./assets/app-store/acquire_saml.svg","initialize_url":"https://226069089919.ngrok.io/mix2-initialize"},"displayScope":"contact_action","area":"backend"})
};
request(options, function (error, response) {
if (error) throw new Error(error);
console.log(response.body);
});
When creating a card, there is a collection of supported types that can be included in the schema. These types are essentially UI controls that interact to provide content or data to the user card.
Available JSON key for templating:
| Name | description | Notes |
|---|---|---|
Text |
type - text text - this is demo text displayStyle - header/paragraph style - error/muted/success/normal align - right/left/center |
Represents a paragraph |
Image |
type - image url - https://acquire.io height - number [default 100%] width - number [default 100%] align - right/left/center rounded - true/false (default -> false) |
Embed an image |
Link |
type - link url - https://acquire.io visibleText - text of redirect url showLink - true/false (default -> false) |
Define external resource |
List |
type - list items[] - array of items - |
Defines the item in the list |
Data Table |
type - data-table title - any text verticalAlign - top/middle/bottom (default-> top) bordered - true/false (default -> false) items - array of text to display style - list/table (default ->list) column - no of number (default 1) (only used when style is list) space - non-linear or none (default is linear) subTextAlign - left/right -> (default is left) |
Tabular data entry |
Cards |
type - card style - single/vertical/horizontal (default horizontal) items - array of item - |
Content container |
Divider |
type - divider style - dotted/solid (default solid) size - xs/x/m/l/xl (top bottom spaces)(default is m) fullWidth - true/false (default false) |
Divides a whole into parts vertical. |
spacer |
type - spacer size - dxs/s/m/l/xl |
Create space |
Button |
type - button label - text to display style - primary/secondary/link/muted/error/success/outlined (default primary) size - xs/s/m/l/xl (default m) action - same as other individual item |
Defines a clickable |
Feedback |
type - feedback label - string text to display style - star/ thumbs ratings - number (if style is star > if >5 then it will show max 5) (default is 5) |
Rating picker |
Section |
type - section Items - array of components |
|
Json-to-html |
type - json-to-htm json - json object of html markdown |
|
Checkbox |
type - checkbox label - text to display value - items - array of checkbox item (label, value, checked) action - same as other individual item |
Checkbox item list |
Input |
type - input/textarea label - text to display value - placeholder - action - same as other individual item |
Specifies an input field where the user can enter data |
Radio |
type - radio label - text to display value - id - action - same as other individual item Items - array of radio item (label, value, checked) |
Radio option list |
Single Select |
type - single-select label - text to display Items - array of item to display in dropdown (label, value, id) |
Single select dropdown list |
Badge |
type - badge text - text to display style - primary/success/error/warning/muted (default primary) bordered - true/false rounded - true/false displayType - primary/secondary/advanced/advanced-secondary |
Badges are used to add additional information to any content |
Grid |
type - grid header - array of header data [{data - [{array of body data}]title - title of the grid (not required) emptyChar - text to display when there is no data (not required) columnsWidth - same (for same width of columns ) (not required) |
A grid consists of a parent element, with one or more child elements |
app.post("/text-initialize", (req, res, next) => {
console.log('contact-information', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"type": "text",
"text": "This is a header",
"displayStyle": "header"
},
{
"type": "text",
"text": "This is a header",
"displayStyle": "header",
"style": "error",
"align": "right"
},
{
"type": "text",
"text": "This is a header",
"displayStyle": "header",
"style": "success",
"align": "right"
},
{
"type": "text",
"text": "This is a header",
"displayStyle": "header",
"style": "muted",
"align": "center"
},
{
"type": "text",
"text": "This is paragraph text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"displayStyle": "paragraph"
},
{
"type": "text",
"text": "This is muted text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"style": "muted"
},
{
"type": "text",
"text": "This is error text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"style": "error"
},
{
"type": "text",
"text": "This is error text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"style": "success"
},
{
"type": "text",
"text": "Left aligned",
"align": "left"
},
{
"type": "text",
"text": "Center aligned",
"align": "center"
},
{
"type": "text",
"text": "Right aligned",
"align": "right"
}
]
}
}
});
});
app.post("/image-initialize", (req, res, next) => {
console.log('contact-information', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"type": "image",
"url": "https://i.picsum.photos/id/1025/4951/3301.jpg"
},
{
"type": "image",
"width": 200,
"url": "https://i.picsum.photos/id/1025/4951/3301.jpg"
},
{
"type": "image",
"height": 200,
"url": "https://i.picsum.photos/id/1025/4951/3301.jpg"
},
{
"type": "image",
"width": 200,
"height": 200,
"align": "right",
"url": "https://i.picsum.photos/id/1025/4951/3301.jpg"
},
{
"type": "image",
"width": 200,
"height": 200,
"align": "center",
"url": "https://i.picsum.photos/id/1025/4951/3301.jpg"
},
{
"type": "image",
"rounded": true,
"url": "https://i.picsum.photos/id/1025/4951/3301.jpg"
},
{
"type": "image",
"width": 200,
"height": 200,
"rounded": true,
"url": "https://i.picsum.photos/id/1025/4951/3301.jpg"
}
]
}
}
});
});
app.post("/link-initialize", (req, res, next) => {
console.log('body==initialize=', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"type": "link",
"visibleText": "Click Click Click",
"url": "https://google.com"
},
{
"type": "link",
"visibleText": "Click Click Click",
"url": "https://google.com",
"showLink": false
},
{
"type": "link",
"visibleText": "Click Click Click",
"url": "https://google.com",
"showLink": true
},
{
"type": "link",
"url": "https://google.com",
"showLink": false
},
{
"type": "link",
"url": "https://google.com",
"showLink": true
}
]
}
}
});
});
app.post("/list-initialize", (req, res, next) => {
console.log('contact-information', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"type": "list",
"items": [
{
"type": "item",
"id": "selected_article",
"title": "**WeChat**",
"subtitle": "WeChat is a Chinese multi-purp...",
"image": {
"url": "https://picsum.photos/id/0/5616/3744",
"width": 30,
"rounded": true,
"height": 30
},
"value": "https://5d03c.lml.io/help/wechat",
"action": {
"type": "submit"
}
},
{
"type": "item",
"id": "selected_article",
"title": "**Missed Chats**",
"subtitle": "You can use the "Filters&...",
"image": {
"url": "https://picsum.photos/id/0/5616/3744",
"width": 30,
"height": 30
},
"value": "https://5d03c.lml.io/help/missed-chats",
"action": {
"type": "submit"
}
},
{
"type": "item",
"id": "selected_article",
"title": "**Live Chat Profiles**",
"subtitle": "The chat profile provides a de...",
"image": {
"url": "https://picsum.photos/id/0/5616/3744",
"width": 30,
"height": 30
},
"value": "https://5d03c.lml.io/help/chat-profile",
"action": {
"type": "submit"
}
},
{
"type": "item",
"id": "selected_article",
"title": "**Dialog Flow Chatbot **",
"subtitle": "As you may now know Acquire ha...",
"image": {
"url": "https://picsum.photos/id/0/5616/3744",
"width": 30,
"height": 30
},
"value": "https://5d03c.lml.io/help/dialog-flow-chatbot-integration",
"action": {
"type": "submit"
}
},
{
"type": "item",
"id": "selected_article",
"title": "**How to use Live Chat in Acquire**",
"subtitle": "This article is a basic overview...",
"image": {
"url": "https://picsum.photos/id/0/5616/3744",
"width": 30,
"height": 30
},
"value": "https://5d03c.lml.io/help/how-to-use-live-chat-in-acquire",
"action": {
"type": "submit"
}
}
]
}
]
}
}
});
});
app.post("/table-initialize", (req, res, next) => {
console.log('contact-information', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"type": "data-table",
"title": "Order details",
"verticalAlign": "middle",
"style": "list",
"column": "2",
"items": [
{
"type": "item",
"key": "Order ID",
"value": "AMA#12062020"
},
{
"type": "item",
"key": "Order Created Date",
"value": "Thursday, 12 March 2020"
},
{
"type": "item",
"key": "Order Updated Date",
"value": "Thursday, 12 March 2020"
},
{
"type": "item",
"key": "Order Status",
"value": "Processing"
},
{
"type": "item",
"key": "Payment Method",
"value": "Gpay"
},
{
"type": "item",
"key": "Amount",
"value": "10000"
},
{
"type": "item",
"key": "Discount Amount",
"value": "1000"
},
{
"type": "item",
"key": "Offer Applied",
"value": "YES"
},
{
"type": "item",
"key": "Coupon Applied",
"value": "YES"
},
{
"type": "item",
"key": "Coupon Amount",
"value": "500"
},
{
"type": "item",
"key": "TAX",
"value": "200"
},
{
"type": "item",
"key": "Final Amount",
"value": "8700"
}
]
}
]
}
}
});
});
app.post("/card-initialize", (req, res, next) => {
console.log('contact-information', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"type": "card",
"style": "single",
"items": [
{
"type": "item",
"title": "Judi Colton",
"subtitle": "Tech Head, California",
"bordered": true,
"align": "center",
"image": {
"url": "https://cdn.pixabay.com/photo/2015/03/03/18/58/girl-657753_960_720.jpg",
"height": 300
},
"action": {
"type": "url",
"url": "https://google.com/0"
},
"text": [
{
"type": "text",
"text": "This is paragraph text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"displayStyle": "paragraph"
},
{
"type": "text",
"text": "This is muted text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"style": "muted"
},
{
"type": "text",
"text": "This is error text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"style": "error"
},
{
"type": "text",
"text": "This is error text. Here's a [link](https://developers.intercom.io/). Here's some *bold text*. Lorem ipsum.",
"style": "success"
}
],
"buttons": [
{
"type": "button",
"label": "Muted button",
"style": "muted",
"action": {
"type": "url",
"url": "https://google.com/5"
}
},
{
"type": "button",
"label": "Error button",
"style": "error",
"action": {
"type": "url",
"url": "https://google.com/6"
}
},
{
"type": "button",
"label": "Success button",
"style": "success",
"action": {
"type": "url",
"url": "https://google.com/7"
}
}
]
}
]
}
]
}
}
});
});
app.post("/multi-initialize", (req, res, next) => {
console.log('contact-information', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"type": "divider",
"style": "dotted", //dotted/solid (default solid)
},
{
"type": "spacer",
"size": "xl" // xs/x/m/l/xl (top bottom spaces)(default is m),
"fullWidth" : false //true/false (default false)
},
{
"type": "button",
"label": "Normal Button"
},
{
"type": "button",
"label": "Normal Button",
"style": "primary" //primary/secondary/link/muted/error/success/outlined (default primary)
},
{
"type": "button",
"label": "Secondary button",
"style": "secondary"
},
{
"type": "spacer",
"size": "xl" // xs/s/m/l/xl (default m)
},
{
"type": "button",
"label": "Outlined button",
"style": "outlined"
},
{
"type": "button",
"label": "Link button",
"style": "link"
},
{
"type": "button",
"label": "Muted button",
"style": "muted"
},
{
"type": "button",
"label": "Error button",
"style": "error"
},
{
"type": "button",
"label": "Success button",
"style": "success"
},
{
"type": "spacer",
"size": "xl"
},
{
"type": "feedback",
"style": "star", //star/ thumbs
"label": "How good are you in frontend technologies",
"rating": 9 //number (if style is star > if >5 then it will show max 5) (default is 5)
},
{
"type": "feedback",
"style": "thumbs",
"label": "How good are you in backend technologies"
},
{
"type": "feedback",
"style": "thumbs",
"size": "l",
"label": "Thumbs rating variation"
}
]
}
}
});
});
console.log('contact-information', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"type": "section",
"verticalAlign": "middle",
"align": "separate",
"items": [
{
"type": "card",
"style": "horizontal",
"items": [
{
"type": "item",
"title": "Delivery Order #LP01206",
"subtitle": "Pizza can makes anyone happy.",
"image": {
"url": "https://cdn.pixabay.com/photo/2016/05/30/14/10/delivery-guy-1424808_960_720.png",
"width": 50,
"height": 50,
"rounded": true
}
}
]
},
{
"type": "list",
"align": "right",
"items": [
{
"type": "item_list",
"style": "button",
"items": [
{
"type": "button",
"style": "secondary",
"label": "Call Restaurant"
},
{
"type": "button",
"label": "Support",
"style": "secondary"
}
]
}
]
}
]
},
{
"type": "divider"
},
{
"type": "section",
"verticalAlign": "top",
"align": "separate",
"items": [
{
"type": "data-table",
"title": "Order Summary",
"verticalAlign": "top",
"style": "table",
"items": [
{
"type": "item",
"key": "Cheezy-7 Pizza",
"value": "3"
},
{
"type": "item",
"key": "Burn to Hell Pizza",
"value": "2"
},
{
"type": "item",
"key": "Veg Red Sauce Pasta",
"value": "1"
},
{
"type": "item",
"key": "Cheese Garlic Bread",
"value": "3"
},
{
"type": "item",
"key": "Total",
"value": "5500",
"style": "same"
}
]
},
{
"type": "data-table",
"title": "Order details",
"verticalAlign": "middle",
"style": "list",
"action": {
"type": "button",
"label": "Delivered By"
},
"items": [
{
"type": "item",
"key": "Address",
"value": "1201, Times Square I Thaltej,\nShilaj Rd, opposite Rambag,\nThaltej, Ahmedabad,\nGujarat 380059"
}
]
},
{
"type": "image",
"width": 200,
"height": 200,
"align": "right",
"verticalAlign": "middle",
"url": "https://cdn.pixabay.com/photo/2017/12/09/08/18/pizza-3007395_960_720.jpg"
}
]
},
{
"type": "divider"
},
{
"type": "list",
"items": [
{
"type": "item_list",
"style": "button",
"items": [
{
"type": "button",
"label": "Order Again"
},
{
"type": "button",
"label": "Report",
"style": "error"
},
{
"type": "button",
"label": "Rate Us",
"style": "success"
}
]
}
]
}
]
}
}
});
});
app.post("/json-initialize", (req, res, next) => {
console.log('contact-information', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"type": "json-to-html",
"json": [
{
"attributes": [],
"children": [
{
"textContent": "hello from",
"type": "text"
},
{
"attributes": [],
"children": [
{
"textContent": "bot.",
"type": "text"
}
],
"tagName": "strong",
"type": "element"
},
{
"attributes": [],
"children": [
{
"textContent": "this text will show in italic format.",
"type": "text"
}
],
"tagName": "em",
"type": "element"
},
{
"attributes": [],
"children": [
{
"textContent": "underline.",
"type": "text"
}
],
"tagName": "u",
"type": "element"
}
],
"tagName": "p",
"type": "element"
}
]
}
]
}
}
});
});
app.post("/mix1-initialize", (req, res, next) => {
console.log('contact-information', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"_comment1": "this is checkbox",
"type": "checkbox",
"label": "Sample checkbox example",
"value": "",
"items": [
{
"label": "Choice - 1",
"value": "1",
"checked": ""
},
{
"label": "Choice - 2",
"value": "2",
"checked": ""
},
{
"label": "Choice - 3",
"value": "3",
"checked": ""
},
{
"label": "Choice - 4",
"value": "4",
"checked": ""
}
]
},
{
"_comment2": "this is input/textarea",
"type": "input", //input/textarea
"label": "Sample normal input field",
"value": "",
"placeholder": "Type here.."
},
{
"type": "input", //input/textarea
"label": "Sample input with action button",
"value": "",
"placeholder": "Type here..",
"action": {
"type": "event",
"value": "acquireIO.trigger('setInputValue','Hi', true)"
}
},
{
"type": "textarea", //input/textarea
"label": "Sample textarea",
"value": "",
"placeholder": "Type here.."
},
{
"type": "textarea", //input/textarea
"label": "Sample textarea with action button",
"value": "",
"placeholder": "Type here..",
"action": {
"type": "event",
"value": "acquireIO.trigger('setInputValue','Hello', true)"
}
},
{
"_comment3": "this is radio button",
"id": "chkb",
"type": "radio",
"label": "Sample radio button example",
"value": "",
"items": [
{
"label": "Choice - 1",
"value": "`",
"checked": ""
},
{
"label": "Choice - 2",
"value": "2",
"checked": ""
},
{
"label": "Choice - 3",
"value": "3",
"checked": ""
}
]
},
{
"_comment4": "this is single-select",
"type": "single-select",
"label": "Sample single select",
"items": [
{
"label": "Select 1",
"value": "1",
"id": "1"
},
{
"label": "Select 2",
"value": "2",
"id": "2"
},
{
"label": "Select 3",
"value": "3",
"id": "3"
}
]
}
]
}
}
});
});
app.post("/mix2-initialize", (req, res, next) => {
console.log('contact-information', req.body);
res.send({
"canvas": {
"content": {
"components": [
{
"type": "badge",
"text": "Normal Badge"
},
{
"type": "badge",
"text": "Error Badge",
"style": "error"
},
{
"type": "badge",
"text": "Success Badge",
"style": "success"
},
{
"type": "badge",
"text": "Warning Badge",
"style": "warning"
},
{
"type": "badge",
"text": "Mute Badge",
"style": "muted"
},
{
"_comment2": "this is a grid",
"type": "grid",
"header": [
{
"key": "name",
"text": "Name"
},
{
"key": "email",
"text": "Email Id"
}
],
"data": [
{
"name": "Ellan",
"email": "ellan@ellan.com",
},
{
"name": "Jonas",
"email": "Mike@Mike.com"
},
{
"name": "Mike",
"email": "Mike@Mike.com"
},
{
"name": "Janet",
"email": "janet@janet.com",
},
{
"name": "Sheldon",
"email": "sheldon@sheldon.com",
}
]
}
]
}
}
});
});