Plugin Widgets Reference (V1)

Updated on October 4, 2021

Widgets offer a wide range of possibilities for developers and companies wanting to provide new features straight in the Crisp app.

A widget can be configured through Crisp Marketplace by creating a Private or Public plugin, and then declaring the Widget Schema.

This reference contains the schema description for widgets.

iFrame Widget

Root

  • Description: the root object of an iFrame Widget.
  • Properties:
    • version: the version of the schema (required, current version is 1.0)
    • url: the URL to display as the iFrame Widget (required)
{
  "version": "1.0",
  "url": ""
}

Generic Widget

Root

  • Description: the root object of a Generic Widget.
  • Properties:
    • version: the version of the schema (required, current version is 1.0)
    • sections: (required)
{
  "version": "1.0",
  "sections": []
}

Section

  • Description: a group of items.
  • Properties:
    • id: the identifier of the section (required)
    • title: the title of the section (required)
    • condition: a condition to whether show or hide the section (read about conditions here)
    • items: the items of the section (required)
{
  "id": "",
  "title": "",
  "condition": "",
  "items": []
}
  • Description: a button item that opens a link in a new tab.
  • Properties:
    • id: the identifier of the item (required)
    • type: the type of the item, button here (required)
    • condition: a condition to whether show or hide the item (read about conditions here)
    • value:
      • type: the sub-type of the button, link here (required)
      • label: the label of the button (required)
      • url: the link to open (required)
      • color: the color of the button (defaults to black)
        • Values
          • black
          • blue
          • green
          • orange
          • red
          • purple
      • data: the data to attach to the request, as query parameters (read about requests here)
{
  "id": "",
  "type": "button",
  "condition": "",

  "value": {
    "type": "link",
    "label": "",
    "url": "",
    "color": "",
    "data": {}
  }
}
  • Description: a button item that opens a link in a modal.
  • Properties:
    • id: the identifier of the item (required)
    • type: the type of the item, button here (required)
    • condition: a condition to whether show or hide the item (read about conditions here)
    • value:
      • type: the sub-type of the button, modal here (required)
      • label: the label of the button (required)
      • url: the link to open (required)
      • color: the color of the button (defaults to black)
        • Values
          • black
          • blue
          • green
          • orange
          • red
          • purple
      • size: the size of the modal (defaults to normal)
        • Values
          • normal
          • medium
          • large
          • wide
      • controls: whether to show controls ("Open in new tab" and "Close" buttons) bellow the modal or not (defaults to true). When controls are hidden, the modal closure can be triggered via the widget JS SDK.
      • data: the data to attach to the request, as query parameters (read about requests here)
{
  "id": "",
  "type": "button",
  "condition": "",

  "value": {
    "type": "modal",
    "label": "",
    "url": "",
    "color": "",
    "size": "",
    "controls": true,
    "data": {}
  }
}

Hook Button Item

For this item, the plugin must have a configured action URL (Marketplace dashboard, Plugin area, Settings tab).
  • Description: a button item that sends a request to the plugin's action URL.
  • Properties:
    • id: the identifier of the item (required)
    • type: the type of the item, button here (required)
    • condition: a condition to whether show or hide the item (read about conditions here)
    • value:
      • type: the sub-type of the button, hook here (required)
      • label: the label of the button (required)
      • color: the color of the button (defaults to black)
        • Values
          • black
          • blue
          • green
          • orange
          • red
          • purple
      • data: the data to attach to the request, as body payload (read about requests here)
{
  "id": "",
  "type": "button",
  "condition": "",

  "value": {
    "type": "hook",
    "label": "",
    "color": "",
    "data": {}
  }
}

Submit Button Item

For this item, the plugin must have a configured action URL (Marketplace dashboard, Plugin area, Settings tab).
  • Description: a button item that sends a request to the plugin's action URL, with all the values of the data items having the same group identifier.
  • Properties:
    • id: the identifier of the item (required)
    • type: the type of the item, button here (required)
    • condition: a condition to whether show or hide the item (read about conditions here)
    • value:
      • type: the sub-type of the button, submit here (required)
      • label: the label of the button (required)
      • color: the color of the button (defaults to black)
        • Values
          • black
          • blue
          • green
          • orange
          • red
          • purple
      • group: the group identifier (required)
      • data: the data to attach to the request, as body payload (read about requests here)
{
  "id": "",
  "type": "button",
  "condition": "",

  "value": {
    "type": "submit",
    "label": "",
    "color": "",
    "group": "",
    "data": {}
  }
}

Data Item

For this item, the plugin must have a configured action URL (Marketplace dashboard, Plugin area, Settings tab).
  • Description: an item that displays data from internal source (ie. Crisp app) or external source (ie. backend, internal CRM, API).
  • Properties:
    • id: the identifier of the item (required)
    • type: the type of the item, data here (required)
    • condition: a condition to whether show or hide the item (read about conditions here)
    • value:
      • label: the label of the data (required)
      • value: the data value (can be omitted, empty, static or dynamic)
        • If value is omitted (ie. no value), then the item will display the placeholder. If the user enters some data, it will be forwarded to the plugin, via a request to its action URL (read about requests here)
        • If value is empty (ie. an empty string "value": ""), the data will be fetched by requesting it to your plugin's action URL (read about requests here)
        • If value is static (eg. a literal string "value": "abcde"), it will be displayed as is
        • If value is dynamic (eg. a data binding "value": "{conversation.meta.data.order_id}"), it will be bound to Crisp data (read about data binding here)
      • placeholder: the placeholder of the data. In case of a static or dynamic value, placeholder will be ignored.
      • editable: whether to allow data edition or not (defaults to true). In case of a static or dynamic value, editing will not be possible.
      • immediate: whether to immediately fetch the data or not (ie. on conversation's load) (defaults to true)
      • group: the group identifier of the data (see Submit Button Item)
      • data: the data to attach to the request, as body payload (read about requests here)
      • icon: the icon of the data (defaults to info)
        • Values
          • account_box
          • add_circle
          • add
          • align_center
          • align_justify
          • align_left
          • align_right
          • archive
          • arrow_drop_down
          • arrow_drop_up
          • attach_file
          • audio_unmute
          • audio
          • block
          • book
          • bug_report
          • business
          • call_end
          • cancel
          • chat_bubble
          • chat
          • check_circle
          • check
          • chevron_left
          • chevron_right
          • close
          • cloud_done
          • cloud_download
          • cloud_off
          • cloud_upload
          • clock
          • cloud
          • code
          • computer
          • credit_card
          • delete_forever
          • delete
          • devices
          • done_all
          • edit
          • email
          • error
          • extend_enter
          • extend_exit
          • file_copy
          • flag
          • help
          • home
          • info
          • insert_chart
          • insert_photo
          • keyboard_arrow_left
          • keyboard_arrow_right
          • keyboard
          • language
          • link
          • map
          • message
          • mouse
          • movie
          • notifications
          • open_in_browser
          • open_in_new
          • palette
          • pause_circle
          • people
          • person
          • phone
          • pin_drop
          • play_circle
          • refresh
          • repeat
          • restore
          • robot
          • school
          • search
          • send
          • settings
          • star
          • unblock
          • unfold_more
          • video_unmute
          • video
          • visibility
          • warning
          • web_asset
          • wifi_tethering
          • work
{
  "id": "",
  "type": "data",
  "condition": "",

  "value": {
    "label": "",
    "value": "",
    "placeholder": "",
    "editable": true,
    "immediate": true,
    "group": "",
    "icon": ""
  }
}