Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
139 lines (90 sloc) 3.76 KB

Smile To Unlock

Want to give away free content on your site? How about asking for a smile in return 😁



You can also see it working on plunker here:

What is it?

Smile To Unlock is a Web Component built using the StencilJS compiler, so is framework agnostic, can be used in an Angular, Vue, React or even in a vanilla web application.

Smile To Unlock captures an image from the users camera and uses the Azure Cognitive Services Emotive API to figure out how happy the person is.

  • NOTE: On the FREE tier you get 30,000 API requests a month.

Getting Started

  1. Include smiletounlock.js in your HTML file
  • via a script tag (quickest)
<script src=""></script>
  • or via a node module
npm install smile-to-unlock --save

Then add a script tag to your HTML like so:

 <script src='node_modules/smile-to-unlock/dist/smiletounlock.js></script>
  1. Grab an API Key from Azure
  • NOTE: On the FREE tier you get 30,000 API requests a month.
  1. Add this tag to your HTML
<smile-to-unlock api-key="<YOUR_API_KEY_HERE>"></smile-to-unlock>
  1. Add this code to trigger the component
var locker = document.querySelector('smile-to-unlock');

This opens the component full screen and starts asking the user to smile.

  1. Add this code to check to see if the user has smiled
locker.addEventListener("userSmiled", function (ev) {
    // --> Add the code to show the free content here <--
    locker.end(); // End the locker so the camera is shutdown

Using the helper hider

As a shortcut if you just have a video or part of the page you want to hide from the user unless they smile you can use the helper <smile-to-unlock-hider></smile-to-unlock-hider> component.

  1. Place the hider inside the component you want to hide.

NOTE: The element you want to hide should have the style position: relative;

<div class="this-is-what-want-to-hide" style="position: relative;">
    <!-- This will add a black overlay to any content with some text and a button to start the smiling process -->

    <!-- This is the actual unlocker component  -->
    <smile-to-unlock api-key="<YOUR_API_KEY_HERE>"></smile-to-unlock>
  1. Then make sure to add this code at the end of your html file somewhere:
  • This code shows the hider overlay over the content you want to hide (so the user can't see it or click on any buttons if it's a video).
(function() {
    var hider = document.querySelector('smile-to-unlock-hider');
    var locker = document.querySelector('smile-to-unlock');

    // This event is called when the user has clicked Smile To Unlock
    hider.addEventListener("readyToSmile", function (ev) {
    // Starts the locker full screen

    // This event is sent when the user has smiled
    locker.addEventListener("userSmiled", function (ev) {

        // Hide the hider so we show the content

        // End the locker so the camera is shutdown

Working on Smile To Unlock

To setup run:

npm install
npm start

To view the build, start an HTTP server inside of the /www directory.

To watch for file changes during develop, run:

npm run dev

To build the app for production, run:

npm run build