In this article you will learn how to create your first Crisp plugin using the Marketplace. We will use NodeJS to create the plugin, but the same process can be used with any programming language. After this tutorial you will be able to create a fully-featured plugin.

Video tutorial



Crisp Marketplace setup

The Crisp Marketplace is the website that allows you to centralize all your plugin developments.

Visit the website: https://marketplace.crisp.chat/ to create your account.
Create a plugin and provide it a valid URN.

Let's configure the plugin

Prerequisites

NodeJS;
npm;
ngrok;
a Crisp Website.

Kickstart your plugin by cloning the example repo: github.com/crisp-im/crisp-plugin-node-example
Get the dependencies: $ npm install
In the API tab of your plugin in the Marketplace copy the API Identifier. Paste in the cloned project (in lib/pong_plugin.js, const crispAPIIdentifier = ...)
Do the same for the Key and URN. You can find the URN at the top of the page of your plugin.
Browse to the Settings tab of your plugin and add the content of the schema.json file. (File available in the cloned repo)

Setup a tunnel between you and Crisp

Download ngrok and start ./ngrok http 1234 (Where 1234 is the port speciied in lib/index.js.)
Copy the generated URL (Ex: https://a1e9e89c2d80.ngrok.io).
Add it in the Settings URL field inside the Settings tab of your plugin. Append /config.html and press save.

Expected result.

Add a Trusted Website in the Marketplace

Get your Website ID using this article: How to find the Website ID?
Copy paste the Website ID in the Trusted Website field of your Settings page in your Marketplace account.

Expected result

Start the example plugin

Execute the server using node ./lib/index.js
Configure your plugin pong message. In the Settings tab of your plugin, send a test request and configure your message and save.
Send a message in a Crisp conversation.
The plugin should respond with your custom message!
Was this article helpful?
Cancel
Thank you!