Integrate your own Cloud App
The Cardin for Gmail Webhook is and advanced Connector which delivers your favorite Cloud App to your Gmail inbox via powerful 3rd party workflow tools like Google Cloud Functions, Microsoft Flow, or even a custom API endpoint of your own design and implementation.
Choose a platform
The Gmail Add-ons platform guards your sensitive data and thus restricts connections to external services unless the base URL is explicitly white listed.
Currently, we support the following platforms:
| Platform | Acceptable base URL |
|---|---|
| Google Cloud Functions | *.cloudfunctions.net |
| Microsoft Flow | *.azure.com:443 |
Please, note that no matter which platform is chosen, the endpoint you are using must be publicly accessible (apart from passing authentication parameters in query string) and must support HTTPS
Connect to the platform
Each time an email is opened (or the Connector is clicked upon for those set to manual), Webhook issues a POST request to the endpoint you provided with the email’s metadata and content passed in as a stringified JSON payload.
| Property | Type | Role |
|---|---|---|
| Bcc | String | List of Bcc emails joined by comma with single whitespace |
| Cc | String | List of Cc emails joined by comma with single whitespace |
| date | String | UTC String representing date when the email was sent |
| sender | String | Inbox context: sender’s name Sent context: primary recipient’s name |
| from | String | Inbox context: sender’s email Sent context: primary recipient’s email |
| id | String | Email unique Id |
| subject | String | Email subject |
| data | Array | Current screen configuration that you can use as response template |
| form | Object | Form data, each property being an Array of input values |
{
“Bcc”: “e1@ex.com, e2@ex.com”,
“Cc”: “e3@ex.com, e4@ex.com”,
“date”: “Wed Oct 28 00:00:00 GMT+00:00 2019”,
“sender”: “Support”,
“from”: “e3@example.com”,
“id”: “123ab45cd6”,
“subject”: “Re: Connecting”
}
Display simple sections
If you want to display a few simple informational widgets (for example, to represent table data), the Connector can be provided with a set of widgets, consisting of only title and accompanying text content.
Display advanced sections
To leverage all that the Webhook Connector type has to offer, you have the option to provide a flexible set of advanced sections.
| Parameter | Type | Role |
|---|---|---|
| widgets | Array* | Sets widgets to display. For detailed reference see below. |
| isCollapsible | Boolean | If set to true, widgets will be initially put under the collapsed spoiler. Defaults to false |
| numUncollapsible | Integer | If isCollapsible is set to true, this parameter dictates the number of widgets that must be displayed, regardless |
| header | String | Section header to display as a title. Defaults to none |
{
“header” : “Advanced”,
“isCollapsible” : true,
“numUncollapsible” : 5,
“widgets” : []
}
Display simple widgets
The simplest widgets you can build are text-based. The first type is TextParagraph, which can be used to display normal unannotated text. The second type is KeyValue, allowing you to prepend text with a title (and more, please see complex widgets section for details).
TextParagraph widget
| Parameter | Type | Role |
|---|---|---|
| type | String* | Sets widget type. Should always be TextParagraph |
| content | String* | Sets text content to display |
{
“type” : “TextParagraph”,
“content” : “Simple text”
}
KeyValue widget
| Parameter | Type | Role |
|---|---|---|
| type | String* | Sets widget type. Should always be KeyValue |
| content | String* | Sets text content to display |
| title | String | Sets widget title |
{
“type” : “KeyValue”,
“title” : “Widget title”,
“content” : “Annotated text”
}
Display Image widgets
Gmail Add-ons are designed to extend the email client, so there aren’t many options if you wish to display graphics (no SVG, fixed width only), however simple graphics (including GIF animations) can be displayed via the Image widget.
Image widget
| Parameter | Type | Role |
|---|---|---|
| type | String* | Sets widget type. Should always be Image |
| content | String* | Sets image source (HTTPS only) |
| alt | String | Sets text to display if image becomes unavailable |
{
“type” : “Image”,
“content” : “https://cardinsoft.com/wp-content/uploads/2019/05/ImageWidget.png”,
“alt” : “Alternative text”
}
Display advanced widgets
Widgets can be much more complex than simple text and graphics. Currently you can add actions that open links or append icon and text label display to KeyValue widgets.
| Parameter | Type | Role |
|---|---|---|
| type | String* | Sets widget type. Should always be KeyValue |
| content | String* | Sets text content to display |
| icon | String | Sets icon by name (enumerable value) |
| title | String | Sets title to the top of the widget |
{
“type” : “KeyValue”,
“content” : “Icon can be set via its enumerable name”,
“icon” : “STAR”,
“title” : “KeyValue with icon (Enum)”
}
Set custom icon
If you can’t find an icon that suits your needs, you can set a custom icon of your choice (we would recommend checking the Material design icon library first) if it is publicly hosted and is accessible over secure connection.
| icon | String | Sets icon by source URL. Should be public and secure (HTTPS) |
“icon” : “https://cardinsoft.com/wp-content/uploads/2019/04/cardin_100-100.png”
Set text label
You can also set a label to be displayed to the right of the widget (try to keep it short as text on the left might become clipped if can’t be wrapped).
| buttonText | String* | Sets label text to display |
| disabled | Boolean* | Should be true |
“buttonText” : “Label”,
“disabled” : true
Set both icon and label
Finally, you can set an icon (be it predefined or custom), a label and prepend a title at the same time.
Display Button widgets
You can use TextButton widget if you need to open a link or perform an external action. Please, note that due to standard Google security restrictions, you can’t perform actions in an Add-on.
| Parameter | Type | Role |
|---|---|---|
| type | String* | Sets widget type. Should always be TextButton |
| title | String* | Sets text to display on the button |
| content | String* | Sets URL of the page to open |
| action | String* | Sets action type to perform. Should always be link |
| disabled | Boolean | Sets disabled flag. Defaults to true |
{
“type” : “TextButton”,
“title” : “Disabled”,
“content” : “https://cardinsoft.com”,
“action” : “link”,
“disabled” : true
}
Button with background
To display button with with white text on a coloured background you need to set the filled parameter to true.
| filled | Boolean | Sets filled flag. Should be true for buttons with background |
“filled” : true
Button with coloured text
If you wish to change button text colour, set the colour parameter. It accepts colour HEX codes as values.
| colour | String | Sets button text colour. Defaults to #009BDE (primary colour) |
“colour” : “#DD0955”
Set text colour and background
You can set both text colour and background by providing both parameters.
Combine buttons in sets
Buttons can be stacked up into a ButtonSet. This is a special widget with a collection of buttons as content. Although you can add as many as you like, we strongly suggest adding a ButtonSet every 4 buttons.
| Parameter | Type | Role |
|---|---|---|
| type | String* | Sets widget type. Should always be ButtonSet |
| content | Array* | Sets buttons to display. See TextButton docs for details. |
Build actionable widgets
Widgets can be a part of a form allowing you to exchange data between the Connector and your API endpoint.
Editable KeyValue widget
KeyValue widget types can be made editable, in this case they will be converted to TextInput widgets when clicked (and will revert back once the form is submitted).
| Parameter | Type | Role |
|---|---|---|
| type | String* | Sets widget type. Should always be KeyValue |
| state | String* | Makes widget actionable. Should always be editable |
| name | String* | Sets name that will be used as a key for this field |
| icon | String | Sets icon either by name or source URL |
| title | String | Sets title displayed at the top of widget |
{
“type” : “KeyValue”,
“state” : “editable”,
“name” : “fieldKV”,
“content” : “Click on the widget to enter edit mode”,
“icon” : “https://cardinsoft.com/wp-content/uploads/2019/06/cardin_100-100_red.png”,
“title” : “Editable widget”
}
TextInput widget
Use the TextInput widget if you are building a form and need a simple text field to be displayed from the start.
| Parameter | Type | Role |
|---|---|---|
| type | String* | Sets widget type. Should always be TextInput |
| state | String* | Makes widget actionable. Should always be editable |
| name | String* | Sets name that will be used as a key for this field |
| content | String* | Sets prefilled input text |
| title | String | Sets widget title text |
| hint | String | Sets hint for widget bottom |
{
“type” : “TextInput”,
“state” : “editable”,
“name” : “fieldTI”,
“content” : “This is a simple text input field”,
“title” : “Text input field”,
“hint” : “Text inputs can have useful hints”
}
Make TextInput multiline
TextInput widgets can be multiline (although, their height can’t be expanded to show multiple lines) and include a hint at the bottom with custom prompts.
| multiline | Boolean | Makes widget multiline |
“multiline” : true
Checkbox widget
The checkbox widget can be used in the standard way to allow multiple non-mutually exclusive options. Note that only the selected values will be sent as payload when a form is submitted.
| Parameter | Type | Role | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| type | String* | Sets widget type. Should always be CHECK_BOX | |||||||||
| state | String* | Makes widget actionable. Should always be editable | |||||||||
| name | String* | Sets name that will be used as a key for this field | |||||||||
| content | Array* | Sets options to choose, each should be an object with parameters as follows:
| |||||||||
| title | String | Sets widget title text |
{
“type” : “CHECK_BOX”,
“state” : “editable”,
“name” : “fieldCBX”,
“content” : [{
“text” : “Do you agree that multiple choice is better presented by checkboxes?”,
“value” : “yes”,
“selected” : true
}, {
“text” : “Did you know checkboxes aren’t mutually exclusive?”,
“value” : “ofc!”,
“selected” : false
}],
“title” : “Checkbox”
}
Radio button widget
You can also use a single-choice radio button widget (you can annotate the widget with a title as any other text-based type).
| Parameter | Type | Role | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| type | String* | Sets widget type. Should always be RADIO_BUTTON | |||||||||
| state | String* | Makes widget actionable. Should always be editable | |||||||||
| name | String* | Sets name that will be used as a key for this field | |||||||||
| content | Array* | Sets options to choose, each should be an object with parameters as follows:
| |||||||||
| title | String | Sets widget title text |
{
“type” : “RADIO_BUTTON”,
“state” : “editable”,
“name” : “fieldRDB”,
“content” : [{
“text”: “With radio, it is always either one,”,
“value”: “one”,
“selected”: true
}, {
“text” : “or the other, but not both…”,
“value” : “other”,
“selected” : false
}],
“title” : “Radio button”
}
Dropdown widget
Finally, you can present users with a closed set of options hidden until clicked upon with the dropdown widget. Note that you can only select one option.
| Parameter | Type | Role | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| type | String* | Sets widget type. Should always be DROPDOWN | |||||||||
| state | String* | Makes widget actionable. Should always be editable | |||||||||
| name | String* | Sets name that will be used as a key for this field | |||||||||
| content | Array* | Sets options to choose, each should be an object with parameters as follows:
| |||||||||
| title | String | Sets widget title text |
{
“type” : “DROPDOWN”,
“state” : “editable”,
“name” : “fieldDWN”,
“content” : [{
“text” : “To be”,
“value” : “be”,
“selected” : true
}, {
“text” : “or not to be,”,
“value” : “not”,
“selected” : false
}, {
“text” : “that is the question”,
“value” : null,
“selected” : false
}],
“title” : “Dropdown”
}
Debug
Cardin core features advanced error handling and will notify you of any problem encountered, as well as provide you with steps to fix the issue where possible.
Unsupported platforms
If you specify a domain different from the ones currently supported, the Connector will display a corresponding prompt and a list of platforms that can be used for your Webhook.
You can request a platform to be added, and we will add it as soon as possible if we find that the platform is compatible with Cardin for Gmail
Syntax Errors
If you misconfigured the JSON being returned from the API or there was an unexpected syntax error, the Connector will display a relevant prompt. If you are unable to fix the issue yourself, don’t hesitate to contact us.
