Webhook

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:

PlatformAcceptable 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.

ParameterTypeRole
widgetsArray*Sets widgets to display. For detailed reference see below.
isCollapsibleBooleanIf set to true, widgets will be initially put under the collapsed spoiler. Defaults to false
numUncollapsibleIntegerIf isCollapsible is set to true, this parameter dictates the number of widgets that must be displayed, regardless
headerStringSection 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

ParameterTypeRole
typeString*Sets widget type. Should always be TextParagraph
contentString*Sets text content to display

{
“type” : “TextParagraph”,
“content” : “Simple text”
}

KeyValue widget

ParameterTypeRole
typeString*Sets widget type. Should always be KeyValue
contentString*Sets text content to display
titleStringSets 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

ParameterTypeRole
typeString*Sets widget type. Should always be Image
contentString*Sets image source (HTTPS only)
altStringSets 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.

ParameterTypeRole
typeString*Sets widget type. Should always be KeyValue
contentString*Sets text content to display
iconStringSets icon by name (enumerable value)
titleStringSets 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.

iconStringSets 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).

buttonTextString*Sets label text to display
disabledBoolean*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.

ParameterTypeRole
typeString*Sets widget type. Should always be TextButton
titleString*Sets text to display on the button
contentString*Sets URL of the page to open
actionString*Sets action type to perform. Should always be link
disabledBooleanSets 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.

colourStringSets 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).

ParameterTypeRole
typeString*Sets widget type. Should always be KeyValue
stateString*Makes widget actionable. Should always be editable
nameString*Sets name that will be used as a key for this field
iconStringSets icon either by name or source URL
titleStringSets 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.

ParameterTypeRole
typeString*Sets widget type. Should always be TextInput
stateString*Makes widget actionable. Should always be editable
nameString*Sets name that will be used as a key for this field
contentString*Sets prefilled input text
titleStringSets widget title text
hintStringSets 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.

multilineBooleanMakes 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. 

ParameterTypeRole
typeString*Sets widget type. Should always be CHECK_BOX
stateString*Makes widget actionable. Should always be editable
nameString*Sets name that will be used as a key for this field
contentArray*

Sets options to choose, each should be an object with parameters as follows:

textString*sets text
valueString*sets option value
selectedBooleansets selected flag
titleStringSets 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).

ParameterTypeRole
typeString*Sets widget type. Should always be RADIO_BUTTON
stateString*Makes widget actionable. Should always be editable
nameString*Sets name that will be used as a key for this field
contentArray*

Sets options to choose, each should be an object with parameters as follows:

textString*sets text
valueString*sets option value
selectedBooleansets selected flag
titleStringSets 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.

ParameterTypeRole
typeString*Sets widget type. Should always be DROPDOWN
stateString*Makes widget actionable. Should always be editable
nameString*Sets name that will be used as a key for this field
contentArray*

Sets options to choose, each should be an object with parameters as follows:

textString*sets text
valueString*sets option value
selectedBooleansets selected flag
titleStringSets 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.