public/famous-people-bundle.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
      html, body{
        margin:0px;
        overflow-x:hidden;
        width:100%;
      }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="http://localhost:9292/compiled/bundles/famous-people.js"></script>
  </head>
  <body>
        <div class="slide-deck your-class"></div> <!-- Example Target Div for the widget -->
        <div class="results-container">
          <div class="results"></div>
        </div>
        <div class="personality-types"></div>
        <div class="personality-traits"></div>
        <div class="celebrity-matches"></div>

        <script>
        function processAssessment(){
          Traitify.setHost("https://api-sandbox.traitify.com");
            Traitify.setPublicKey($.cookie("publicKey"));
            Traitify.setVersion("v1");
            window.tfWidget = Traitify.ui.load($.cookie("assessmentId"), ".slide-deck", {
              results: {target: ".results-container > .results"},
              personalityTypes: {target: ".personality-types"},
              personalityTraits: {target: ".personality-traits"},
              famousPeople: {target: ".celebrity-matches"}
            });

        }
        if($.cookie("assessmentId")){
            processAssessment()
        }else{
          $.post("/public_key").then(function(publicKey){
            $.cookie("publicKey", publicKey)
            $.post("/assessments/?deck=livingsocial").then(function(assessment){
              $.cookie("assessmentId", assessment.id)
              processAssessment()
            })
          })
        }

        </script>
  </body>
</html>