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.

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": ""
}

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": []
}

Link Button Item

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 Button Event request, as query parameters (read about events 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: states which controls ("Open in new tab", "Close", "Minimize" and "Move" buttons) are shown bellow the modal (boolean or array, defaults to true). When the "Close" control is hidden, the modal closure can be triggered via the widget JS SDK.
    - Boolean value: whether to show all controls or to show none
    - Array value: the list of buttons to show
      - Values
        
        open
        
        close
        
        minimize (the move button will be automatically added when the modal is minimized)
  - data: the data to attach to the Button Event request, as query parameters (read about events 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 Action Event request, as body payload (read about events 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 Action Event request, as body payload (read about events 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 an Action Event request to the action URL (read about events here)
    - If value is empty (ie. an empty string "value": ""), the data will be fetched by sending an Action Event request to your plugin's action URL (read about events 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 Action Event request, as body payload (read about events here)
  - icon: the icon of the data (defaults to info)
    - Values
      - align_center
      - align_justify
      - align_left
      - align_right
      - arrow_angle
      - arrow_double_clear
      - arrow_double
      - arrow_down
      - arrow_left
      - arrow_repeat
      - arrow_reply
      - arrow_right
      - arrow_rotate
      - arrow_shuffle
      - arrow_top_right
      - arrow_top
      - at_bold
      - at
      - attachment_link_angle
      - attachment_link
      - block_circle_bold
      - block_circle
      - book
      - briefcase
      - building
      - burger_descending
      - calendar_date
      - cards_shuffle
      - chart_square
      - chart
      - check_circle
      - check_double
      - check_square
      - check
      - chevron_down
      - chevron_left
      - chevron_right
      - chevron_up
      - circle_dashed
      - clip_attachment
      - clock_arrow
      - clock
      - cloud_check
      - cloud_cross
      - cloud_download
      - cloud_upload
      - cloud_warning
      - cloud
      - code
      - color_palette
      - computer
      - copy
      - credit_card
      - cross_circle
      - cross_square
      - cross
      - devices
      - divider_horizontal
      - document_clip
      - document_copy
      - document_search
      - door_exit
      - dots_menu_horizontal
      - dots_menu_vertical
      - drag
      - duplicate
      - email_letter_pencil
      - email_letter
      - eraser
      - eye_cross
      - eye_visible
      - falling_star
      - file_copy
      - file_edit
      - file_text_solid
      - file_text
      - file
      - filter_sort
      - flag
      - gif_square
      - gift
      - glasses
      - globe_arrow
      - globe
      - graduate_hat
      - heartbeat_notification
      - home_house
      - info
      - invoice
      - key_select
      - keyboard_return
      - keyboard
      - lab_tube
      - label_tag
      - layers
      - letters
      - light_bulb_off
      - light_bulb_on
      - list_bullets
      - lock
      - magnifier
      - map
      - message_bubble_round_empty
      - message_bubble_round
      - message_bubble_square
      - microphone_unmute
      - microphone
      - minus_circle
      - minus
      - mouse
      - movie_clapperboard
      - notification_bell
      - paper_plane_send
      - paper_plane
      - paper_text_code
      - password_key
      - pause_circle
      - pencil
      - phone_end
      - phone
      - photo_frame
      - picture_in_picture_in
      - picture_in_picture_out
      - pin_location
      - play_circle
      - plugins_blocks
      - plus_circle
      - plus_square
      - plus
      - question_circle
      - question_mark
      - screen_zoom_enter
      - screen_zoom_exit
      - settings_cog
      - smiley_smiling
      - snippet
      - space_rocket
      - sparkle_variant
      - sparkle
      - sparkles
      - star_filled
      - star
      - suitcase
      - table
      - tag
      - tags_solid
      - target_arrows
      - terminal
      - text_paragraph_letter
      - translate
      - trash_bin_cross
      - trash_bin
      - user_account_circle
      - user_account_square
      - user_block
      - user_check
      - user_group
      - user_profile_circle
      - user_profile_minus
      - user_single
      - video_unmute
      - video
      - wand
      - warning_circle
      - warning_triangle
      - wifi_signal_circle
      - window_frame_arrow
      - window_frame_cross
      - window_frame_resize_left
      - window_frame_resize_right
      - window_frame_search
      - window_frame_sidebar
      - window_frame_simple_arrow
      - window_frame

{
  "id": "",
  "type": "data",
  "condition": "",

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