<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>[Calendly] Widget embed API example</title>
  <style>
  
  body {
    background: url('https://www.toptal.com/designers/subtlepatterns/patterns/restaurant_icons.png');
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;  
    margin: 0px;
  }

  h1 {
    font-size: 50px;
    text-align: center;
  }

  .container {
    margin: 0 auto;
    width: 100%;
  }

  .container p, .container h2 {
    text-align: center;
  }
  
  </style>
</head>

<body>
  <div class="container">
    <!-- This is the DOM element that will contain your embedded typeform -->
    <div class="calendly-inline-widget" 
      style="min-width:320px;height:580px;" 
      data-auto-load="false">
      <!-- Calendly inline widget begin -->
      <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
      <script>
        Calendly.initInlineWidget({
          url: '<%= params[:url] %>',
          prefill: {
            name: '<%= params[:name] %>',
            email: '<%= params[:email] %>',
            customAnswers: {
                //a1: "Yes",
                //a2: "At the Starbucks on 3rd and 16th"
            }
          },
          utm: {
              utmCampaign: "Conversation",
              utmSource: "<%= params[:conversation_key] %>",
              utmMedium: "ConversationMessage",
              utmContent: "<%= params[:message_id] %>",
              utmTerm: "Chaskiq"
          }
        });

        function isCalendlyEvent(e) {
          return e.data.event &&
                e.data.event.indexOf('calendly') === 0;
        };
        
        window.addEventListener(
          'message',
          function(e) {
            //console.log("ENENE", e)
            if (isCalendlyEvent(e) && e.data.event === "calendly.event_scheduled") {
              window.parent.postMessage({
                chaskiqMessage: true, 
                type: "Calendly", 
                status: "submit",
                data: e.data
              }, "*")
            }
          }
        );

      </script>
    </div>
  
  </div>

</body>

</html>