Emoji Picker Plugin for Flex UI 2.x

A Flex Plugin for Twilio Flex Programmable Contact Center.

About the project

The emoji picker component was built from scratch using Twilio Paste. This means that it will blend in with Flex UI styling and look the part when Flex UI is in dark mode. For customizing styling please refer to the Paste design tokens.

To add/remove emojis from the rendered list, simply modify the src/emojis.json file. If adding an emoji, please make sure to specify the category as one of the following. "Smileys & People", "Animals & Nature", "Food & Drink", "Activity", "Travel & Places", "Objects", "Symbols", "Flags".

It is also worth noting that Flex UI uses the 'Inter' font for displaying messages which is not compatible with all emojis. To avoid having a mis-rendered emoji appear in chat, these unsupported emojis have been removed from the picker.

Setup

Clone the repository and enter the main directory:

cd plugin-emoji-picker-2.x

Make sure you have Node.js as well as npm. We support Node >= 10.12 (and recommend the even versions of Node). Afterwards, install the dependencies by running:

# If you use npm
npm install

Make a copy of the example appConfig.js file.

cp public/appConfig.example.js public/appConfig.js

Next, please install the Twilio CLI by running:

brew tap twilio/brew && brew install twilio

Finally, install the Flex Plugin extension for the Twilio CLI:

twilio plugins:install @twilio-labs/plugin-flex

To run the plugin locally (for testing purposes) run:

twilio flex:plugins:start

To deploy the plugin run:

twilio flex:plugins:deploy --changelog "WRITE YOUR CHANGELOG HERE"

For further details on Flex Plugins refer to our documentation on the Twilio Docs page.

Contributing

Any contributions are welcome to this project. Create a pull request, get it approved and make the project better :)

Code of Conduct

Please read the Code of Conduct for further details.