StoryLane Embed code for Nextjs, react.js app.

StoryLane.jsx

import React, { useEffect } from 'react';
import Script from 'next/script';

// Just replace two ITEMS
// BGURL with the storylane bg image
// <UNIQUE PAGE ID> for your storylane id

const StorylaneEmbed = () => {
  useEffect(() => {
    // This effect will run on the client-side after the component mounts
    const script = document.createElement('script');
    script.src = "https://js.storylane.io/js/v1/storylane.js";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  const handlePlayDemo = () => {
    if (typeof window !== 'undefined' && window.Storylane) {
      window.Storylane.Play({
        type: 'preview_embed',
        demo_type: 'image',
        width: 1377,
        height: 800,
        element: document.querySelector('.sl-preview-cta'),
        demo_url: 'https://app.storylane.io/demo/<UNIQUE PAGE ID>'
      });
    }
  };

  return (
    <div className="sl-embed-container" style={{
      position: 'relative',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      border: '1px solid rgba(63,95,172,0.35)',
      boxShadow: '0px 0px 18px rgba(26, 19, 72, 0.15)',
      borderRadius: '10px'
    }}>
      <style jsx>{`
        .sl-heading-text {
          max-width: 53%;
        }
        @media (max-width: 1024px) {
          .sl-heading-text {
            max-width: 90%;
          }
        }
        .sl-preview-cta:hover .sl-preview-cta-ripple {
          transition: all 1s cubic-bezier(0,0,.2,1);
          inset: -0.75em !important;
          opacity: 0 !important;
        }
        .sl-preview-cta:hover .sl-preview-cta-ripple-shadow {
          opacity: 0.125 !important;
        }
      `}</style>
      <div className="sl-preview-heading" style={{
        position: 'absolute',
        inset: 0,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        zIndex: 999999,
        fontFamily: 'Poppins, Arial, sans-serif',
        fontSize: 'clamp(20px, 2.664vw, 28px)',
        fontWeight: 500,
        lineHeight: 'normal',
        textAlign: 'center',
        borderRadius: '10px'
      }}>
        <div className="sl-heading-text" style={{
          color: '#000',
          marginBottom: 'clamp(20px, 1.776vw, 24px)',
          textShadow: '0px 1px 2px rgba(26, 19, 72, 0.40)'
        }}>
          Take a tour of product
        </div>
        <button onClick={handlePlayDemo} className="sl-preview-cta" style={{
          backgroundColor: '#376570',
          border: 'none',
          borderRadius: '8px',
          boxShadow: '0px 0px 15px rgba(26, 19, 72, 0.45)',
          color: '#FFFFFF',
          display: 'inline-block',
          fontFamily: 'Poppins, Arial, sans-serif',
          fontSize: 'clamp(16px, 1.599vw, 20px)',
          fontWeight: 600,
          height: 'clamp(40px, 3.996vw, 50px)',
          lineHeight: 1.2,
          padding: '0 clamp(15px, 1.776vw, 20px)',
          textOverflow: 'ellipsis',
          transform: 'translateZ(0)',
          transition: 'background 0.4s',
          whiteSpace: 'nowrap',
          width: 'auto',
          zIndex: 999999,
          cursor: 'pointer'
        }}>
          VIEW DEMO
          <div className="sl-preview-cta-ripple" style={{
            position: 'absolute',
            border: '1px solid #376570',
            inset: 0,
            borderRadius: 'inherit',
            pointerEvents: 'none'
          }}>
            <div className="sl-preview-cta-ripple-shadow" style={{
              boxShadow: '#376570 0px 0px 4px 4px',
              opacity: 0,
              borderRadius: 'inherit',
              position: 'absolute',
              inset: 0
            }}></div>
          </div>
        </button>
      </div>
      <div className="sl-embed" data-sl-demo-type="image" style={{
        position: 'relative',
        paddingBottom: 'calc(58.10% + 27px)',
        width: '100%',
        height: 0,
        transform: 'scale(1)',
        overflow: 'hidden'
      }}>
        <div className="sl-preview" style={{
          width: '100%',
          height: '100%',
          zIndex: 99999,
          position: 'absolute',
          background: "url('BGURL') no-repeat",
          backgroundSize: '100% 100%',
          borderRadius: 'inherit'
        }}></div>
        <iframe className="sl-demo" src="" name="sl-embed" allow="fullscreen" style={{
          display: 'none',
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          border: 'none'
        }}></iframe>
      </div>
    </div>
  );
};

export default StorylaneEmbed;