Test Environment. You are currently using the Webex for Developers test environment. Apps created here will not be available for use with Webex Teams. Please visit Webex for Developers to manage your apps.

Buttons and Cards Initiative Extends Its Reach

September 23, 2020
Gaurav Sharma
Gaurav SharmaProduct Manager
Buttons and Cards Initiative Extends Its Reach

The Buttons and Cards initiative has recently seen an expansion in the features and attributes it supports. The latest update is a special one, however, as it brings with it expansion in terms of Availability and Usability - Buttons and Cards in Widgets, which expands the ability to add buttons and cards to 3rd party web apps, and support of Data URI for the images, enhancing the usability factor as developers can now include images inline in Card JSON.

Let’s see more about both the enhancements, one by one.

Enhanced Availability: Support for Buttons and Cards in Widgets

Up until now, the Buttons and Cards were supported only in the Desktop clients (Mac and Windows), the Mobile clients (Android and iOS) and the Web Client. Extending support to Widgets bolsters both the developer community and consumer organisations, as they will be able to enjoy the availability of Buttons and Cards in 3rd party web apps.

For example, the Salesforce platform includes a Webex Teams integration via Widgets. Now users working with this integration will be able to see the Cards render in the spaces displayed within Salesforce.

Image: Card in Salesforce environment in Widget.png

Enhanced Usability: Support for Data URI for images

Images have been an important element in the Cards, providing important information or improving aesthetics, or both. Until now, the only way to add an image to a card was via a public URL; now developers can add the image inline in base64 encoded format. This provides developers with more flexibility.

Note that the support for Data URI is limited to base64 images, and specific to JPEG, BMP and PNG format.

The following examples will give you a peek into how you can add an image in Cards.

{
                            "type": "Image",
                            "style": "Person",
                            "url": "https://developer.webex.com/images/webex-teams-logo.png",
                            "size": "Medium",
                            "height": "50px"
                        }

Adding an image inline using Data URI

{
                            "type": "Image",
                            "style": "Person",
                            "url": "data:image/png;base64,iVBORw ... **truncated for easier readibility - Data URIs are super, super long** ...  Jggg=="
                            "size": "Medium",
                            "height": "50px"
                        }

For conversion of image to Data URI, numerous free online tools are available - just search something similar to "image to data uri".

Data URI can be useful, but at the same time developers should be cautious about the content length of the entire message. With Data URIs, hitting content length limit is observed frequently.

We're excited to announce these new enhancements for Buttons and Cards. If you have product feedback or if you have any questions, please reach out to us in the Ask Buttons and Cards discussions space or Webex Developer Support.

Related Articles