JSFiddle - React, Tailwind, and code Playground

by karlhorky

HTML

<div class="container">
    <div class="page-header">
         <h1>Theme Engine Demo</h1>

    </div>
    <div id="squatchembed"></div>
    <a href="#" class="squatchpop">Click here to Open</a>
</div>

CSS

/** No custom CSS needed. This example imports Twitter Bootstrap V2.3.2 **/
 body {
    background: #FFF;
    color: #333;
}
/*
iframe {
    width: 100% !important;
    height: 1000px; /* Only for testing non-responsive */
    overflow: hidden;
}*/
#squatchEmbedWrapper {
    display: block !important;
}

JavaScript

var _sqh = _sqh || [];

   // Push user details for a user who is logged in to your system
   _sqh.push(['init', {
       tenant_alias: 'a4nq49irsz1da', // Your live or test mode tenant_alias
       account_id: '$accountId', // REPLACE: A company or group ID used to group users together
       payment_provider_id: '$paymentId', // REPLACE: the Stripe/Recurly/Braintree/Zuora id used for payment system integration (or null)
       user_id: '$userId', // REPLACE: A user ID from your system (must be unique for every user)
       email: '[email protected]', // REPLACE: The e-mail address of the user
       first_name: 'Karl', // REPLACE: The user's first name
       last_name: 'Horky' // REPLACE: The user's last name
   }]);

// Include squatch.js
(function(){function l(){var s=document.createElement("script");s.type="text/javascript";s.async=true;s.src=location.protocol+"//d2rcp9ak152ke1.cloudfront.net/assets/javascripts/squatch.min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t)}if(window.attachEvent){window.attachEvent("onload",l)}else{window.addEventListener("load",l,false)}})();