Preview Embed

by storylane

HTML

<div>
  <script src="https://js.storylane.io/js/v1/storylane.js"></script>
  <div class="sl-embed-container" style="position:relative;display:flex;align-items:center;justify-content:center;">
    <button class="sl-preview-cta" style="z-index:999999;padding:7px 15px;border-width:2px;border-style:solid;border-radius:8px;font-weight:600;font-size:18px;filter:drop-shadow(0px 0px 15px rgba(26, 19, 72, 0.25));font-family:Poppins, Arial, sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;background:#9939EB;border-color:#FFFFFF;color:#FFFFFF;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)" onclick="Storylane.Play({type: 'preview_embed',demo_type: 'image', width: 2560, height: 1442, element: this, demo_url: 'https://app.storylane.io/demo/vktkzir9yxy9'})">TAKE A TOUR</button>
    <div class="sl-embed" data-sl-demo-type={project.kind === ProjectKind.Html ? 'html' : 'image'} style="position:relative;padding-bottom:calc(56.33% + 27px);width:100%;height:0;transform:scale(1)">
      <div class="sl-preview" style="width:100%;height:100%;z-index:99999;position:absolute;background:url('https://storylane-prod-uploads.s3.us-east-2.amazonaws.com/company/company_d3ab1eef-4a7e-4994-9234-64f19dd6b621/project/project_a9269591-607a-4c9a-978b-2558904a018f/page/page_eb02604e-5e26-41d5-9346-d5c454f8f0ee.png') no-repeat;background-size:100% 100%;border-radius:inherit;"></div>
      <iframe class="sl-demo" src="" allow="fullscreen" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;border:none;"></iframe>
    </div>
  </div>
</div>