To emote | əˈmōt | is to display emotions openly, especially while acting. But the word also has a meaning in internet history. The original internet chat tool, IRC, provided a /me command, which allowed IRC channel participants to share emotion.
If my name were friendlybug80 on IRC, when I typed /me jumps for joy, all IRC channel participants would see
* friendlybug80 jumps for joy
The 3rd-person * friendlybug75 jumps for joy is an emote.
tl;dr The emote widget (and its associated server) allows virtual event attendees watching the event stream to share their emotion with other attendees and the presenter in real time. It's a higher fidelity, virtual-only version of clapping.
- git
- node
- API server deployed or running locally https://github.com/fostive/emote-server
git clone git@github.com:fostive/emote-widget.gitcd emote-widget- Update the
apiDomaininconfig.jsto your API server's domain. npm install
npm run watch
-
npm run buildto generate adist/main.jsfile -
Include
main.jsinside the<head>tags of the HTML page into which you want to embed the widget.<script type="text/javascript" src="main.js"></script> <!-- main.js can be found in the dist folder in this project -->
-
Add the
<emote-widget>HTML element within the<body>of the page. It doesn't matter where within the body you put it. The widget will be absolutely positioned on the page using CSS.<emote-widget talk-id="mytalk" open="true"></emote-widget>- The
talk-idvaluemytalkis a unique string identifier for the current talk. You'll need to update this when the talk changes. See the next step for more details. - Set
opentofalseif you want to start your Widget closed - Colors, fonts, and positioning can be configured in
widget.scss - Set
widget-sidetorightorleftinwidget.scss - Add absolute positioning to your site's CSS to adjust were it appears.
emote-widget { position: absolute; right: 0; bottom: 0; }
- The
-
Write some JavaScript to update the
talk-idattribute's value when the talk changes. This will reset the counters to zero and record future clicks toward the newtalk-idvalue. Thetalk-idvalue can be any string, but make sure it's unique for each "segment" (e.g. talk, panel discussion, keynote, etc) of your event for which you want to uniquely capture emote events. Something like the following can be used, but you'll have to implement a way to invoke the function when the talk changes.updatTalkId(talkId) { const widget = document.querySelector('emote-widget'); widget.setAttribute('talk-id', '<NEW_TALK_ID>'); }
-
If you need to add a hook for every emote received you can pass a callback to the
onEmotemethod on the emote widget.const widget = document.querySelector('emote-widget'); widget.onEmote((event) => { if (event.data === 'smile') { // do something } });
Changing the emojis:
-
Create and export your new emoji in svg format. Ours are square, 47px x 47px.
-
Use a base64 converter on each new emoji. We used https://www.base64-image.de/
-
Copy the css the converter outputs into
button.scssandanimation.jsunder the corresponding classes.
- Lightning Web Components to build the Web Components
- Anime.js to animate the emojis
We love contributions, small or big, from others!
Please see our CONTRIBUTING guidelines. The first thing to do is to discuss the change you wish to make via issue, email, or any other method with the owners of this repository.
Also, please review our code of conduct. Please adhere to it in all your interactions with this project.
Thanks goes to these wonderful ✨ people (emoji key) for contributing to the project:
 Diana Perkins 🎨 💻 🤔 |
 Chris Castle 💻 📖 🤔 |
 Julián Duque 💻 👀 📖 |
 Clifton Campbell 💻 |
 Luke Karrys 💻 🔧 |
This project follows the all-contributors specification. Contributions of any kind welcome!
Please review and adhere to our CODE_OF_CONDUCT.md before contributing to this project in any way (e.g. creating an issue, writing code, etc).
This project is licensed under the Creative Commons Zero v1.0 License. See the LICENSE file for details.