Skip to content
This repository has been archived by the owner on May 24, 2022. It is now read-only.

Latest commit

 

History

History
137 lines (92 loc) · 7.27 KB

README.md

File metadata and controls

137 lines (92 loc) · 7.27 KB
Raw

Emote Widget

All Contributors

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.

Prerequisites

Installing

  1. git clone [email protected]:fostive/emote-widget.git
  2. cd emote-widget
  3. Update the apiDomain in config.js to your API server's domain.
  4. npm install

Running

  1. npm run watch

Deploying

  1. npm run build to generate a dist/main.js file

  2. Include main.js inside 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 -->

  3. 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>

    1. The talk-id value mytalk is 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.
    2. Set open to false if you want to start your Widget closed
    3. Colors, fonts, and positioning can be configured in widget.scss
    4. Set widget-side to right or left in widget.scss
    5. Add absolute positioning to your site's CSS to adjust were it appears.
    emote-widget {
    position: absolute;
    right: 0;
    bottom: 0;
}

  4. Write some JavaScript to update the talk-id attribute's value when the talk changes. This will reset the counters to zero and record future clicks toward the new talk-id value. The talk-id value 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>');
}

  5. If you need to add a hook for every emote received you can pass a callback to the onEmote method on the emote widget.

    const widget = document.querySelector('emote-widget');
widget.onEmote((event) => {
    if (event.data === 'smile') {
        // do something
    }
});

Customizing

Changing the emojis:

  1. Create and export your new emoji in svg format. Ours are square, 47px x 47px.

  2. Use a base64 converter on each new emoji. We used https://www.base64-image.de/

  3. Copy the css the converter outputs into button.scss and animation.js under the corresponding classes.

🛠 Built With

🤝 Contributing

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!

Code of Conduct

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).

📝 License

This project is licensed under the Creative Commons Zero v1.0 License. See the LICENSE file for details.