Tekos
  • General overview
  • Tekos Chat Workspace
    • Tekos Chat
      • Design and Interface of chat
      • Apps
    • Tekos Chat FAQ
      • How to create a workspace for my team?
      • How to invite members to my workspace?
      • What is a room and to create it?
      • Public or private room? What is the difference?
      • What is Roles & Permissions?
      • What is power level and how does it work?
      • How do I know if my message was read?
      • How can I share a file?
      • How to search messages and/or files.
      • How do I make video calls?
      • How do I change my profile settings?
      • Notifications settings.
      • Room settings.
      • How to leave a room?
      • Lab features
  • Flow Builder
    • Tekos Flow
      • Editor UI
      • Building your first flow
        • Import / Export Flow
      • Flow.tekos library
      • Subflows
  • Omnichannel Live Chat
    • Overview
    • Channels
      • WhatsApp
  • Building Apps
    • Building Apps
      • Connecting flow with the chat
      • HTTP Requests
        • Handle query parameters passed to an HTTP endpoint
        • Handle url parameters in an HTTP endpoint
    • Chat Surfaces
      • Modals - Adaptive Cards
        • Building An Adaptive Card
        • Basic usage of Cards
        • Variables in the Cards
        • Action Buttons
      • Messages
        • Instant Messaging
          • Message types
        • Getting the Messages
        • Getting events for a room
        • Messages webhook
    • Interactivity in the Chat
      • Shortcuts
      • Slash Commands
      • Buttons
Powered by GitBook
On this page

Was this helpful?

  1. Building Apps
  2. Chat Surfaces

Modals - Adaptive Cards

Overview - What is an Adaptive Card?

PreviousChat SurfacesNextBuilding An Adaptive Card

Last updated 4 years ago

Was this helpful?

Microsoft definition of Adaptive Cards: Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps design and integrate light-weight UI for all major platforms and frameworks.

Our simple description of Adaptive Cards: We use them as a tool to easily create as a form and use it inside the app or the chat. Same as the Tekos, it translates hard coding into visual interface.

You can find them all over our products we share. Most of our Apps use Adaptive Cards in any form and shape.

Example Card with Amazon stocks

They can be useful for many type of needs:

  1. Form to get user data like name, surname, mail, phone, address etc.

  2. Store important tokens/keys in the flow for the apps.

  3. Or for simple actions like Create a reminder, display prompt, Data fetched from apps.

As you can see we use them for simple usage with static data, but also the content of the Adaptive Cards can be dynamic depending on the requirements.

On the Shopify app we used some custom function to create an array with products and also to count the price tags.

Everything about how to create more complicated cards using the tekos flow you can find in the Adaptive Cards - Variables tutorial.

Example card of Shopify App
Example Cards of Hubspot & Pipedrive Apps