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 integration via Widgets. Now users working with this integration will be able to see the Cards render in the spaces displayed within Salesforce.

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.

Adding an image using public link

{
                            "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".

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.