Custom app

Start building your integration

Getting started

This guide describes how to create your own custom app integration for Support Board. Follow the steps below to build your first app. You are free to use your app privately or commercialize it to earn revenue. Download our branding kit here to create promotional materials for your app.

Create the first app

We recommend starting from our sample app. Download it here and place it in the /apps/ folder of your Support Board installation. Rename the folder using your app slug (example: myapp). The app slug must use only Latin characters, without spaces, slashes, or special characters. If you prefer to build an app from scratch, create a new folder inside the /apps/ directory and name it with your app slug (example: myapp). Then create the files listed in the app files step.
Edit the config.php file and add the following code: define('SB_CUSTOM_APPS', [['appslug', 'App name']]). Replace appslug with your app folder name and App name with the display name of your app. You can register multiple apps by adding additional arrays inside the main array.
Open the Support Board admin panel, where you will find your app settings available in the settings area.
Use the WEB API, JS API, or PHP API to implement your app features. Add your app source code to the JS, CSS, and PHP files listed in the app files step.

Download example app

App files

Your app must include at least the following files: function.php and settings.json. All other files are optional.

function.php

The function.php file is used to define the PHP functions for your app. It is loaded globally in Support Board, on both the admin and client sides. The file must include at least the following code: define("SB_CUSTOMAPP", '1.0.0');. Replace 1.0.0 with your app version number and CUSTOMAPP with your app slug in uppercase. This file is required.

settings.json

The settings.json file is used to define the custom settings for your app. It must contain a JSON array with the settings objects. Refer to the list below for all available setting types and their parameters. This file is required.

[
  {
    "type": "text",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here",
    "help": "https://example.com"
  },
  {
    "type": "textarea",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here",
    "help": "https://example.com"
  },
  {
    "type": "password",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here",
    "help": "https://example.com"
  },
  {
    "type": "number",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here",
    "help": "https://example.com"
  },
  {
    "type": "checkbox",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here",
    "help": "https://example.com"
  },
  {
    "type": "button",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here",
    "button-text": "Title here",
    "button-url": "#",
    "help": "https://example.com"
  },
  {
    "type": "select",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here",
    "help": "https://example.com",
    "value": [
      [ "", "Default" ],
      [ "option-name-here", "Text here" ],
      [ "option-name-here", "Text here" ]
    ]
  },
  {
    "type": "repeater",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here.",
    "help": "https://example.com",
    "items": [
      {
        "type": "text",
        "id": "setting-id-here",
        "name": "Title here"
      },
      {
        "type": "password",
        "id": "setting-id-here",
        "name": "Title here"
      },
      {
        "type": "number",
        "id": "setting-id-here",
        "name": "Title here"
      },
      {
        "type": "checkbox",
        "id": "setting-id-here",
        "name": "Title here"
      },
      {
        "type": "button",
        "id": "setting-id-here",
        "name": "Title here",
        "button-text": "Button name here",
        "button-url": "#"
      }
    ]
  },
  {
    "type": "multi-input",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here.",
    "help": "https://example.com",
    "value": [
      {
        "type": "text",
        "id": "setting-id-here",
        "title": "Title here"
      },
      {
        "type": "password",
        "id": "setting-id-here",
        "title": "Title here"
      },
      {
        "type": "number",
        "id": "setting-id-here",
        "title": "Title here"
      },
      {
        "type": "checkbox",
        "id": "setting-id-here",
        "title": "Title here"
      },
      {
        "type": "button",
        "id": "setting-id-here",
        "title": "Title here",
        "button-text": "Button name here",
        "button-url": "#"
      }
    ]
  },
  {
    "type": "upload-image",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here.",
    "background-size": "auto 64px",
    "help": "https://example.com"
  },
  {
    "type": "color",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here.",
    "help": "https://example.com"
  },
  {
    "type": "input-button",
    "id": "setting-id-here",
    "title": "Title here",
    "content": "Description here.",
    "button-text": "Button name here",
    "help": "https://example.com"
  }
]

admin.js

The admin.js file is used to add JavaScript functionality to your app. It is loaded only within the Support Board admin panel. Use the JS API to interact with the admin interface. This file is optional.

admin.css

The admin.css file is used to add custom CSS styles for your app. It is loaded only in the Support Board admin panel. This file is optional.

front.js

The front.js file is used to add JavaScript functionality to your app on the front end. Use the JS API to interact with the client side of Support Board. This file is optional.

front.css

The front.css file is used to add custom CSS styles for your app on the front end. It is loaded only on the client side. This file is optional.

Installation for the user

The user must copy the app folder inside the /apps/ folder of the Support Board installation folder. Then, edit the config.php file and add following code: define('SB_CUSTOM_APPS' , [['appslug', 'App name']]). Replace appslug with the folder name of your app and App name with the name of your app. After that, the app is ready to be used.

WEB API

JAVASCRIPT API

PHP API

USE CASES