Twake
⬅️ Go on twake
  • ☀️ Twake
  • Getting started
    • ▶️Use Twake on twake.app
    • 🏗️Install on your server
      • 🎡Scale with Twake
    • ⚙️Configuration
      • 🔒Security
      • 🔗Custom domain + HTTPS
        • Apache2 configuration
      • 💌Configure mail server
      • 🎨Customisation
      • 🔌Connectors and plugins
      • 👨‍💻 Authentication modes
        • Using Keycloak (LDAP, OpenID and more)
        • Installing Twake with LemonLDAP (LDAP, OpenID and more)
  • How to use it
    • 👋Welcome to Twake !
    • 🧰Console
      • Users
    • 🏢Company & workspace
      • Invite user from Chat
      • Rights
    • 💠Applications
      • 💬Chat
        • Channels
        • Message
      • 📂Drive
        • File and folder
        • Share file with public link
      • 📆Calendar
      • ✅Tasks
      • 🔃Connectors
        • n8n
    • 🖥️Desktop and mobile app
    • 🔒Privacy
  • Developers API
    • 🏠Home
    • 🥇Getting started
      • Create your first application
      • Authenticate with Postman
      • Send a message with your application
      • Trigger action from command
    • ⚙️Application settings
      • Api
      • Display
      • Privileges
      • Identity
    • 📖API Reference
      • Webhook
      • Drive
      • Message
        • DELETE Request
        • POST Request
      • Authentication
    • 🧱Blocks
  • Internal Documentation
    • 🥇Get started
    • 🎨Twake Ecosystem Guidelines
    • 📚Our stack
    • 🧱Backend and APIs
      • 🔑(WIP) Authentication
      • 👥Users and workspaces
      • 🍎Applications
        • Database models
        • REST APIs
      • 🎩Channels and tabs
        • Database models
      • 💬Messages
        • Database models
      • 📄Files
        • Database models
        • REST APIs
        • Resumable.js
      • 📲Notifications
        • Database models
      • 🛠️Twake service development
        • What is a service in Twake ?
        • Create a new service
        • Platform/Technical services
          • Database ORM platform service
    • 🖥️Web, desktop and mobile
      • Table
      • ObjectModal
        • ObjectModalTitle
        • ObjectModalSeparator
        • ObjectModalSectionTitle
        • ObjectModalFormTitle
      • UserListManager
      • MediumPopupManager
      • MenuManager
    • 🎭Translation
Powered by GitBook
On this page
  • Introduction:
  • Write your first block:
  • 1. Take a look at slack block kit documentation
  • 2. Try your first block
  • 3. Twake block

Was this helpful?

  1. Developers API

Blocks

PreviousAuthenticationNextGet started

Last updated 3 years ago

Was this helpful?

Introduction:

This guide will introduce you to use blocks to custom Twake messages. Twake allows application to send customs messages. This customs messages offer the possibility for an application to easily format the text your application wants to send and/or display UI components like button, input or iframe.

Write your first block:

1. Take a look at slack block kit documentation

  • Go to this page:

  • Understand basic layers of block:

    • Block

      First layer object, defining the use case of the current block (Actions, Context, Header, Files...). It can contain block elements and Composition object.

    • Block elements

      Second layer object, defining complex element that will be display in a block (Button, Menus, Input...). It can contain composition object

    • Composition object

      Third layer object, formatting the data to display in both block and/or block elements

2. Try your first block

  • Go to this page:

  • Try to add/remove block

  • Start writing block and check your result

3. Twake block

Twake have some blocks that are not implemented in slack block kit (iframes, progress bar and copiable). To use them please follow this:

iframe

An iframe is Block allowing you to display an html page in twake.

How to use it:

  • Iframe type:

type BlockIframe = { 
          type: "iframe";
          iframe_url: string; 
          width: number; 
          height: number; 
     };
  • type: always "iframe"

  • iframe_url: the URL of the web page you want to display

  • width: the with that you iframe will take

  • height: the height that you iframe will take

Example:

{ 
    "blocks": [ 
        { 
            "type": "iframe", 
            "iframe_url": "
            https://twake.app
            ", 
            width: "40vh", 
            height: "40vh" 
        }
    ]
}

Copiable

A copiable is Block element is a readable only input allowing you to copy string with a button.

How to use it:

  • Copiable type: it is a plain text input block element with readonly and copiable set to true

type BlockElementPlaintextInput = {
  type: "plain_text_input";
  action_id: string;
  placeholder?: CompositionPlainTextObject;
  initial_value?: string;
  multiline?: boolean;
  min_length?: number;
  max_length?: number;
  dispatch_action_config?: DispatchActionConfiguration;
  readonly?: boolean;
  copiable?: boolean;
};
  • type: always "plain_text_input"

  • readonly: always true

  • copiable: always true

Example :

{ 
    "blocks": [ 
        {
            "type": "input",
            "element": {
                "type": "plain_text_input",
                "action_id": "plain_text_input-action",
                "initial_value": "https://twake.app"
                "readonly": true,
                "copiable": true,
            },
        }
    ]
}

Progress bar

A Progess bar is Block element that display a progress bar.

How to use it:

  • Progress bar type:

export type BlockElementProgressBar = {
  type: "progress_bar";
  value: number; 
  title: string;
};
  • type: always "progress_bar"

  • value: the value of your progress between 0 and 100

  • title: the title associate to your progress bar

Example :

{ 
    "blocks": [ 
        {
            "type": "progress_bar",
            "value": 50,
            "title": "Chargement" 
            
        }
    ]
}

🧱
Slack Block kit
Block Kit Builder