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.
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.
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!
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.
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.
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!
Published on: 16 / 03 / 2021