The Zero2Income Toolbox

If you have questions about any of these tools, feel freeto email us here!

Is there a tool that you would like to have, but aren't seeing it,email us here to let us know! Dana and I will be glad to take a look and see if it's something we can create and add it to the Toolbox.

Custom Code Snippets - Click the ⬇️ to see and view each video!

Auto-Scrolling Image Carousel

How does the Auto-Scrolling Image Carousel Work

Auto-Scrolling Image Carousel

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->

<div class="image-carousel-container">
  <div class="image-carousel-slide active">
    <img src="image1.jpg" alt="image 1 description">
  </div>
  <div class="image-carousel-slide">
    <img src="image2.jpg" alt="image 2 description">
  </div>
  <div class="image-carousel-slide">
    <img src="image3.jpg" alt="image 3 description">
  </div>
</div>

<style>
.image-carousel-container {
  position: relative;
  width: 100%;
  height: 300px; /* Adjust height as needed for your images */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-carousel-slide {
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 2s ease-in-out, opacity 2s ease-in-out;
  opacity: 0;
  transform: translateX(-100%);
}

.image-carousel-slide img {
  width: 100%; /* Adjust image width if needed */
  height: auto; /* Maintain image aspect ratio */
  object-fit: cover; /* Ensure images fill the slide container */
}

.image-carousel-slide.active {
  opacity: 1;
  transform: translateX(0%);
}

.image-carousel-slide.outgoing {
  opacity: 0;
  transform: translateX(100%);
}

@media (max-width: 768px) {
  /* Optional media query for smaller screens */
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  let currentIndex = 0;
  const slides = document.querySelectorAll('.image-carousel-slide');
  const totalSlides = slides.length;

  function showNextSlide() {
    const currentSlide = slides[currentIndex];
    currentSlide.classList.remove('active');
    currentSlide.classList.add('outgoing');

    currentIndex = (currentIndex + 1) % totalSlides;
    const nextSlide = slides[currentIndex];
    nextSlide.classList.add('active');

    // Remove outgoing class after the transition is done
    setTimeout(() => {
      currentSlide.classList.remove('outgoing');
    }, 2000); // Match this duration to the CSS transition duration
  }

  setInterval(showNextSlide, 5000); // Change slide every 5 seconds
});
</script>

Auto-Scrolling Testimonials Carousel

How does the Auto-Scrolling Testimonials work

Auto-Scrolling Text Carousel

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<div class="text-carousel-container">
  <div class="text-carousel-slide active">
    <p>First Testimonial</p>
  </div>
  <div class="text-carousel-slide">
    <p>Second Testimonial</p>
  </div>
  <div class="text-carousel-slide">
    <p>Third Testimonial</p>
  </div>
</div>

<style>
.text-carousel-container {
  position: relative;
  width: 100%;
  min-height: 150px; /* Let it grow if needed */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px; /* Vertical padding helps breathing space */
  box-sizing: border-box;
}

.text-carousel-slide {
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 3s ease-in-out, opacity 2s ease-in-out;
  opacity: 0;
  transform: translateX(-100%);
  font-size: 30px;
  color: #4A4A4A;
  text-align: center;
  font-family: 'EB Garamond', serif;
  box-sizing: border-box;
  padding: 0 20px;
}

.text-carousel-slide p {
  margin: 0;
  line-height: 1.5;
}

.text-carousel-slide.active {
  opacity: 1;
  transform: translateX(0%);
}

.text-carousel-slide.outgoing {
  opacity: 0;
  transform: translateX(100%);
}

/* 📱 Medium Screens */
@media (max-width: 768px) {
  .text-carousel-slide {
    font-size: 22px;
    padding: 0 10px;
  }

  .text-carousel-container {
    padding: 20px 10px;
  }
}

/* 📱 Small Screens */
@media (max-width: 480px) {
  .text-carousel-slide {
    font-size: 18px;
    padding: 0 8px;
  }

  .text-carousel-container {
    padding: 20px 10px;
  }
}

</style>

<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.text-carousel-slide');

function showNextSlide() {
  slides[currentSlide].classList.remove('active');
  slides[currentSlide].classList.add('outgoing');

  currentSlide = (currentSlide + 1) % slides.length;

  slides.forEach((slide, index) => {
    if (index !== currentSlide) {
      slide.classList.remove('active');
      slide.classList.remove('outgoing');
    }
  });

  slides[currentSlide].classList.add('active');
}

setInterval(showNextSlide, 5000);

</script>

Social Share Buttons for Blog

How does the Social Share Buttons for Blog code work

Social Share Buttons for Blogs

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<!-- Add the following line in the head section of your HTML to include Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<div style="display: flex; align-items: center; justify-content: flex-end; font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 28px;">
    <div style="font-weight: bold; margin-right: 10px;">SHARE</div>
    <div style="flex: 0; margin-left: 10px;">
        <a href="#" id="facebook-share" target="_blank">
            <span class="fa-stack" style="font-size: 1.5em;">
                <i class="fas fa-circle fa-stack-2x" style="color: #3b5998;"></i>
                <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
            </span>
        </a>
    </div>
    <div style="flex: 0; margin-left: 10px;">
        <a href="#" id="linkedin-share" target="_blank">
            <span class="fa-stack" style="font-size: 1.5em;">
                <i class="fas fa-circle fa-stack-2x" style="color: #0077b5;"></i>
                <i class="fab fa-linkedin-in fa-stack-1x fa-inverse"></i>
            </span>
        </a>
    </div>
    <div style="flex: 0; margin-left: 10px;">
        <a href="#" id="twitter-share" target="_blank">
            <span class="fa-stack" style="font-size: 1.5em;">
                <i class="fas fa-circle fa-stack-2x" style="color: #1da1f2;"></i>
                <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
            </span>
        </a>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var postUrl = encodeURIComponent(window.location.href);
        var postTitle = encodeURIComponent(document.title);

        var facebookShareLink = "https://www.facebook.com/sharer/sharer.php?u=" + postUrl;
        var linkedinShareLink = "https://www.linkedin.com/shareArticle?mini=true&url=" + postUrl;
        var twitterShareLink = "https://twitter.com/intent/tweet?url=" + postUrl + "&text=" + postTitle;

        document.getElementById("facebook-share").href = facebookShareLink;
        document.getElementById("linkedin-share").href = linkedinShareLink;
        document.getElementById("twitter-share").href = twitterShareLink;
    });
</script>

5 Column Row with Social Icons

How to use the 5 Column Row w/ Social Icons Code Snippet

5 Column Row with Social Icons

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<style>
  .social-media-row {
    display: flex; /* Makes the icons appear in a row */
    justify-content: space-between; /* Spreads icons evenly */
    margin: 0 auto; /* Centers the row horizontally */
  }
  .social-media-row a {
    text-decoration: none; /* Removes underline from links */
    color: inherit; /* Inherits the default text color */
    margin: 0 10px; /* Adds spacing between icons */
    font-size: 20px; /* Adjusts icon size as needed */
  }
  .social-media-row a:hover {
    color: #007bff; /* Changes icon color on hover (optional) */
  }
  .social-media-row svg {
    height: 32px; /* Ensures all SVG icons are the same size */
    width: 32px; /* Ensures all SVG icons are the same size */
  }
  /* Media Queries for responsiveness (adjust sizes as needed) */
  @media (max-width: 768px) {
    .social-media-row a {
      font-size: 16px;
      margin: 0 5px;
    }
  }
  @media (max-width: 480px) {
    .social-media-row {
      flex-wrap: wrap; /* Icons wrap to a new line on small screens */
    }
  }
</style>

<div class="social-media-row">
  <a href="https://www.facebook.com/" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dddddd" d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg>
  </a>

  <a href="https://www.instagram.com/" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dddddd" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
  </a>

  <a href="https://www.linkedin.com/" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dddddd" d="M100.3 448H7.4V149.1h92.8V448zm-46.4-331.6C24.1 116.4 0 92.3 0 61.9S24.1 7.4 53.9 7.4s53.9 24.1 53.9 53.9-24.1 53.9-53.9 53.9zM447.8 448h-92.8V302.4c0-34.7-.7-79.2-48.3-79.2-48.4 0-55.8 37.8-55.8 76.8V448h-92.8V149.1h89V181h1.3c12.4-23.6 42.5-48.5 87.5-48.5 93.6 0 110.9 61.6 110.9 141.6V448z"/></svg>
  </a>

  <a href="https://www.youtube.com/" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dddddd" d="M549.7 124.1c-6.3-24-25-42.6-48.9-48.9-43.2-11.6-216.3-11.6-216.3-11.6s-173.1 0-216.3 11.6c-23.9 6.3-42.6 25-48.9 48.9C7.8 167.3 7.8 256 7.8 256s0 88.7 11.6 131.9c6.3 24 25 42.6 48.9 48.9 43.2 11.6 216.3 11.6 216.3 11.6s173.1 0 216.3-11.6c23.9-6.3 42.6-25 48.9-48.9 11.6-43.2 11.6-131.9 11.6-131.9s0-88.7-11.6-131.9zM232.3 338.8v-161.6l142.8 80.8-142.8 80.8z"/></svg>
  </a>

<a href="https://www.tiktok.com/" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dddddd" d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"/></svg>
  </a>
</div>

Floating Action Button

How to use the Floating Action Button Code Snippet

Floating Action Button

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<style>
  .fab-container {
    position: fixed;
    top: 50px;
    right: 20px;
    z-index: 999;
  }

  .fab {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #5CDB94;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    position: relative;
    font-size: 24px; /* Adjust icon size */
  }

  .fab:hover {
    background-color: #2D2F4E;
  }

  /* Tooltip styles */
  .tooltip-text {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px); /* Position to the left of the button */
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.8); /* Increased opacity */
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    letter-spacing: 1.75px; /* Added letter spacing */
  }

  .fab:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
  }
</style>

<div class="fab-container">
  <a href="#" class="fab" data-tooltip="Schedule a service">
    <i class="fas fa-calendar-alt"></i>
    <span class="tooltip-text">Schedule a Service</span>
  </a>
</div>

<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

Webinar Session Link Button

How to use the Webinar Session Link Button Code Snippet

Webinar Session Link Button

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<style>
#Replace this with Webinar Session Link ID Attribute {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0174C7;
    color: #fff !important; /* Added !important */
    text-decoration: none;
    text-align: center;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
#Replace this with Webinar Session Link ID Attribute:hover {
    background-color: #1CB1C6;
    color: #fff !important; /* Added !important */
    transform: translateY(-5px);
}
#Replace this with Webinar Session Link ID Attribute, 
#Replace this with Webinar Session Link ID Attribute * { /* Target the element and all its children */
    color: #fff !important;
}
</style>

WhatsApp Floating Action Button

How to use the WhatsApp Floating Action Button Code Snippet

WhatsApp Floating Action Button

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<style>
  .fab-container {
    position: fixed !important;
    top: 80px !important;
    right: 20px !important;
    z-index: 9999 !important;
  }
  .fab {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #25D366; /* WhatsApp green color */
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    position: relative;
  }
  .fab:hover {
    background-color: #128C7E; /* Darker WhatsApp green for hover */
  }
  .fab i {
    font-size: 30px; /* Adjust icon size */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  /* Tooltip styles */
  .tooltip-text {
    position: absolute;
    top: 50%;
    right: 70px; /* Position to the left of the button */
    transform: translateY(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Prevent tooltip from blocking hover on button */
  }
  .fab:hover .tooltip-text {
    opacity: 1;
  }
  /* Add a small arrow to the tooltip */
  .tooltip-text::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
  }
</style>
<div class="fab-container">
  <a href="https://wa.me/YOUR_PHONE_NUMBER" class="fab" target="_blank" rel="noopener noreferrer">
    <i class="fab fa-whatsapp"></i>
    <span class="tooltip-text">Chat on WhatsApp</span>
  </a>
</div>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Messenger Floating Action Button

How to use the Messenger Floating Action Button Code Snippet

Messenger Floating Action Button

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<style>
  .fab-container {
    position: fixed !important;
    top: 80px !important;
    right: 20px !important;
    z-index: 9999 !important;
  }
  .fab {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #0084FF; /* Facebook Messenger blue color */
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    position: relative;
  }
  .fab:hover {
    background-color: #006AFF; /* Darker Facebook Messenger blue for hover */
  }
  .fab i {
    font-size: 30px; /* Adjust icon size */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  /* Tooltip styles */
  .tooltip-text {
    position: absolute;
    top: 50%;
    right: 70px; /* Position to the left of the button */
    transform: translateY(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Prevent tooltip from blocking hover on button */
  }
  .fab:hover .tooltip-text {
    opacity: 1;
  }
  /* Add a small arrow to the tooltip */
  .tooltip-text::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
  }
</style>
<div class="fab-container">
  <a href="https://m.me/YOUR_PAGE_ID" class="fab" target="_blank" rel="noopener noreferrer">
    <i class="fab fa-facebook-messenger"></i>
    <span class="tooltip-text">Chat on Messenger</span>
  </a>
</div>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Scrolling Animation

How to use the Scrolling Animation Code Snippet

Scrolling Animation

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<!-- Include AOS CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.css" />
<!-- Include AOS JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
<style>
  @keyframes smoothZoomInUp {
    from {
      opacity: 0;
      transform: scale3d(0.8, 0.8, 0.8) translate3d(0, 50px, 0);
    }
    to {
      opacity: 1;
      transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    }
  }
  /* Hide elements initially */
  .hidden {
    opacity: 0;
    transform: translateY(20px);
  }
  .animate-on-load {
    opacity: 0;
    animation: smoothZoomInUp 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    animation-delay: 0.1s;
  }
</style>
<script>
  window.addEventListener("load", function() {
    // List your element IDs here
    const scrollElementIds = [
      "row-id1", "row-id2", "row-id3",
      "row-id4", "row-id5", "row-id6"
    ];
    const immediateElementIds = ["top-row-id1", "top-row-id2"];
    // Set AOS attributes for scroll-triggered elements
    scrollElementIds.forEach(id => {
      const element = document.getElementById(id);
      if (element) {
        element.setAttribute("data-aos", "zoom-in-up");
      }
    });
    // Add animation class for immediate animation elements
    immediateElementIds.forEach(id => {
      const element = document.getElementById(id);
      if (element) {
        element.classList.add('animate-on-load');
      }
    });
    // Initialize AOS
    AOS.init({
      duration: 1500, // Animation duration in milliseconds
      once: true, // Whether animation should happen only once - while scrolling down
      anchorPlacement: 'center-bottom', // Defines which position of the element regarding to window should trigger the animation
      easing: 'cubic-bezier(0.165, 0.84, 0.44, 1)' // Smooth ease-out function
    });
  });
</script>

Embed PDFs

How to use the Embed PDFs Code Snippets

Desktop

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<div id="Enter the Row ID that has the raw html element." style="width: 100%; padding: 0; box-sizing: border-box;">
  <!-- Raw HTML for PDF -->
  <div id="pdf-container" style="position: relative; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box;">
    <!-- PDF Controls and Viewer -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
    <div id="pdf-controls-desktop" style="text-align: center; margin-bottom: 10px;">
      <button id="prev-page-desktop">Previous</button>
      <span style="color: white;">Page: <span id="page-num-desktop"></span> / <span id="page-count-desktop"></span></span>
      <button id="next-page-desktop">Next</button>
    </div>
    <div id="pdf-viewer-desktop" style="width: 100%; height: 100%; overflow: hidden;">
      <!-- Canvas will be appended by the script -->
    </div>
    <script>
      var url = 'Add the URL for the File that you uploaded to Systeme!';
      var pdfDocDesktop = null,
          pageNumDesktop = 1,
          pageIsRenderingDesktop = false,
          pageNumPendingDesktop = null;

      var scaleDesktop = 1.2,
          canvasDesktop = document.createElement('canvas'),
          ctxDesktop = canvasDesktop.getContext('2d');

      document.getElementById('pdf-viewer-desktop').appendChild(canvasDesktop);
      pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
        pdfDocDesktop = pdfDoc_;
        document.getElementById('page-count-desktop').textContent = pdfDocDesktop.numPages;
        renderPageDesktop(pageNumDesktop);
      });
      function renderPageDesktop(num) {
        pageIsRenderingDesktop = true;
        pdfDocDesktop.getPage(num).then(function(page) {
          var viewport = page.getViewport({ scale: scaleDesktop });
          canvasDesktop.height = viewport.height;
          canvasDesktop.width = viewport.width;
          var renderContext = {
            canvasContext: ctxDesktop,
            viewport: viewport
          };
          var renderTask = page.render(renderContext);
          renderTask.promise.then(function() {
            pageIsRenderingDesktop = false;
            if (pageNumPendingDesktop !== null) {
              renderPageDesktop(pageNumPendingDesktop);
              pageNumPendingDesktop = null;
            }
          });
          document.getElementById('page-num-desktop').textContent = num;
        });
        document.getElementById('pdf-viewer-desktop').scrollTop = 0;
      }
      document.getElementById('prev-page-desktop').addEventListener('click', function() {
        if (pageNumDesktop <= 1) {
          return;
        }
        pageNumDesktop--;
        queueRenderPageDesktop(pageNumDesktop);
      });
      document.getElementById('next-page-desktop').addEventListener('click', function() {
        if (pageNumDesktop >= pdfDocDesktop.numPages) {
          return;
        }
        pageNumDesktop++;
        queueRenderPageDesktop(pageNumDesktop);
      });
      function queueRenderPageDesktop(num) {
        if (pageIsRenderingDesktop) {
          pageNumPendingDesktop = num;
        } else {
          renderPageDesktop(num);
        }
      }
    </script>
  </div>
</div>

<!-- Styles for New Row and PDF Container -->
<style>
  #Enter the Row ID that has the raw html element. {
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

  #pdf-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  #pdf-controls-desktop {
    text-align: center;
    margin-bottom: 10px;
  }

  #pdf-viewer-desktop {
    width: 100%;
    height: calc(100vh - 60px); /* Adjust this if needed to fit better */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  #pdf-viewer-desktop canvas {
    max-width: 100%;
    max-height: 100%;
  }

  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* iPad Air and iPad Pro adjustments */
    #Enter the Row ID that has the raw html element. {
      margin: 0; /* Remove any potential default margin */
      padding: 0; /* Ensure no extra padding */
    }

    #pdf-viewer-desktop {
      height: calc(100vh - 60px); /* Adjust if necessary */
      margin: -5px 0; /* Reduced negative margin */
    }
  }
</style>

Phone

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<div id="Row ID That Has the PDF Embed Code.">
  <div id="pdf-controls">
    <button id="prev-page">Previous</button>
    <span>Page: <span id="page-num"></span> / <span id="page-count"></span></span>
    <button id="next-page">Next</button>
  </div>

  <div id="pdf-viewer">
    <canvas id="pdf-canvas"></canvas>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
<script>
  var url = 'Enter URL Address for the PDF that you uploaded to Systeme.';

  var pdfDoc = null,
      pageNum = 1,
      pageIsRendering = false,
      pageNumPending = null;

  var scale = 1.5,
      canvas = document.getElementById('pdf-canvas'),
      ctx = canvas.getContext('2d');

  function adjustViewerHeight() {
    var container = document.getElementById('Row ID That Has the PDF Embed Code.');
    var controlsHeight = document.getElementById('pdf-controls').offsetHeight;
    var containerHeight = container.offsetHeight;
    var viewerHeight = containerHeight - controlsHeight;
    document.getElementById('pdf-viewer').style.height = viewerHeight + 'px';
  }

  window.addEventListener('load', adjustViewerHeight);
  window.addEventListener('resize', adjustViewerHeight);

  pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    document.getElementById('page-count').textContent = pdfDoc.numPages;
    renderPage(pageNum);
  });

  function renderPage(num) {
    pageIsRendering = true;
    pdfDoc.getPage(num).then(function(page) {
      var viewport = page.getViewport({scale: scale});
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      var renderCtx = {
        canvasContext: ctx,
        viewport: viewport
      };

      var renderTask = page.render(renderCtx);
      renderTask.promise.then(function() {
        pageIsRendering = false;
        if (pageNumPending !== null) {
          renderPage(pageNumPending);
          pageNumPending = null;
        }
      });

      document.getElementById('page-num').textContent = num;
    });
    document.getElementById('pdf-viewer').scrollTop = 0;
  }

  function queueRenderPage(num) {
    if (pageIsRendering) {
      pageNumPending = num;
    } else {
      renderPage(num);
    }
  }

  document.getElementById('prev-page').addEventListener('click', function() {
    if (pageNum <= 1) return;
    pageNum--;
    queueRenderPage(pageNum);
  });

  document.getElementById('next-page').addEventListener('click', function() {
    if (pageNum >= pdfDoc.numPages) return;
    pageNum++;
    queueRenderPage(pageNum);
  });
</script>

<style>
  #Row ID That Has the PDF Embed Code. {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure it takes up the full height of its parent */
  }

  #pdf-controls {
    background: #333;
    color: white;
    padding: 10px;
    text-align: center;
    flex-shrink: 0; /* Prevents the controls from shrinking */
  }

  #pdf-viewer {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  #pdf-canvas {
    display: block;
    width: 100%;
    height: auto;
  }
</style>

Video Player With Lessons

How to use the Video Player Code Snippet

Video Player with Lessons

<!--
  This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<div class="video-container">
    <video id="videoPlayer" class="video-player" controls poster="Image for Lesson 1 URL Goes Here!">
        <source id="videoSource" src="Video 1 URL" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>
<ul class="lesson-list">
    <li class="lesson-item" data-video="Video 1 URL">
        <img src="Lesson 1 Image URL" alt="Lesson 1 Thumbnail" class="lesson-thumbnail">
        <div class="lesson-info">
            <strong>Lesson 1: Title of Lesson</strong> <span class="lesson-length">3:45</span>
            <p class="lesson-description">The description for lesson 1 goes here.</p>
        </div>
    </li>
    <li class="lesson-item" data-video="Video 2 URL">
        <img src="Lesson 2 Image URL" alt="Lesson 2 Thumbnail" class="lesson-thumbnail">
        <div class="lesson-info">
            <strong>Lesson 2: Title for Lesson</strong> <span class="lesson-length">5:20</span>
            <p class="lesson-description">The description for lesson 2 goes here.</p>
        </div>
    </li>
    <!-- Add more lessons as needed -->
</ul>
<style>
    /* Basic CSS styles */
    .video-container {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }
    .video-player {
        width: 100%;
        height: 450px; /* Adjust height as needed */
    }
    .lesson-list {
        margin: 20px auto;
        max-width: 800px;
        padding: 0;
        list-style: none;
    }
 .lesson-item {
        display: flex;
        align-items: center;
        margin: 25px 0;
        padding: 10px;
        border: 1px solid #ddd;
        cursor: pointer;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Add drop shadow */
        transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
    }
    .lesson-thumbnail {
        width: 150px;
        height: auto;
        margin-right: 15px;
    }
    .lesson-info {
        flex: 1;
        text-align: left;
    }
    .lesson-info strong {
        font-size: 16px;
        display: inline; /* Keep the title inline */
    }
    .lesson-length {
        font-size: 14px;
        margin-left: 10px; /* Add some space between the title and time */
        color: #666;
        display: inline; /* Keep the time inline with the title */
    }
    .lesson-description {
        font-size: 14px;
        margin-top: 5px;
        color: #888;
        display: block;
    }
    .lesson-item:hover {
        background-color: #f0f0f0;
    }
</style>
<script>
    // JavaScript to handle video switching
    document.querySelectorAll('.lesson-item').forEach(item => {
        item.addEventListener('click', function() {
            const videoSrc = this.getAttribute('data-video');
            const videoPlayer = document.getElementById('videoPlayer');
            const videoSource = document.getElementById('videoSource');
            
            // Remove poster image after video starts playing
            videoPlayer.removeAttribute('poster');
            
            // Change the video source
            videoSource.setAttribute('src', videoSrc);
            videoPlayer.load(); // Reload the video element to apply the new source
            videoPlayer.play(); // Play the new video
        });
    });
</script>

Systeme.io Website Templates

Zero2Income Business Script Template

Grab My Free Systeme.io Template

Zero2Income Stan Store Clone Template

How to Install and Edit Your Stan Store Template

Grab My Free Stan Store Clone

ChatGPT Prompts

Create a Privacy Policy

How to Use the Create a Privacy Policy Prompt

Create a privacy policy for a website that includes the necessary provisions for CalOPPA, GDPR, and CCPA (CPRA).

Include the text that is required for Google Analytics, Facebook Pixels, Email Marketing with
**(Put in whatever platform you use for email marketing here)**

as the Email Marketing platform, and Payments which will include
the following payment platforms:
**(Put in whatever payment processing systems you use here)**.

It needs to include text to cover remarketing services that are used for marketing and advertising. 
Also, please make sure to include other common provisions that a legally compliant privacy policy would contain.

The website URL is: **Enter your Website Address Here**

The website name is: **Enter your Website Name Here**

The name of the business is: **Enter Your Business Name Here**

The physical address of the business is: 
**Enter the address that you use to be compliant for email marketing. And it is located in the United States.**

The website collects Email Addresses and the first and last name of users. 
**(If you collect other things like phone numbers, Address, State, Province, Zip/Postal Code, City, Social Media Profile Information or other things, you will want to include that here too.)**

The email address that people will need for contact is:
**(Replace this with your stuff - youremail@youremailaddress.com)**
and the contact page is **(Replace this with your stuff - mywebsite.com/contact)**

If any information required to complete this Privacy Policy is missing, make reasonable assumptions based on standard small-business website practices and list any assumptions made at the end of the document.

Create a Terms & Conditions Policy

How to Use the Create a Terms & Conditions Policy Prompt

Create Your Custom Terms and Conditions
To generate your own Terms and Conditions, please fill out the following information:

1. Company Name: [Enter your company name]
	2. Website URL: [Enter your website URL]
	3. Contact Email: [Enter your contact email]
	4. Payment Processor: [Enter your payment processor (e.g., Stripe)]
	5. State (Spelled Out): [Enter your state]
	6. County: [Enter your county]
	7. State Abbreviation: [Enter your state abbreviation]
	8. Full Address: [Enter your full address, e.g., "344 Clinton Street, Apt. 3D, Metropolis, Kings County, NY 66632"]
	
Generated Terms and Conditions Template
Once you fill out the above fields, use the template below to insert your information:

Terms and Conditions for [Company Name]
Last Updated: [Insert Date]

Welcome to [Company Name]! By using this website [Website URL] (the "Website"), you acknowledge that you have read and agreed to the following terms and conditions (the "Terms").

1. Terminology
	• "Customer," "User," "You," or "Your": Refers to any individual accessing or using the Website and its services/products.
	• "Company," "Our," "We," or "Us": Refers to [Company Name].
	• "User Account" or "Account": Refers to the online account maintained by the User to access the services/products.
	• "Product": Refers to any unique product provided by the Company as part of our services.
	
2. Age Restrictions
You must be at least 18 years of age to use our Site. By using the Site, you represent and warrant that you are 18 years of age or older. If you are using the Site on behalf of an organization, you represent that you have the authority to bind that organization to these Terms.

3. Services/Products
The Website allows you to purchase various Products, including but not limited to:
	• Online courses
	• Digital products
	• Website templates
	• Subscription plans
	• Coaching services
Purchases are intended for individual use only. Sharing access or providing your purchase to third parties is prohibited unless explicitly stated otherwise.

4. User Licenses
Subject to these Terms, we grant you a limited, non-exclusive, non-transferable, and revocable license to use our Products for personal, non-commercial purposes. You agree to access only one User Account unless we permit otherwise.

5. Refund Policy
Due to the nature of digital products, all sales of one-time purchases (e.g., online courses, digital products) are final and non-refundable. Subscription plans may be canceled within 30 days for a full cancellation. No refunds will be issued for partial months.

6. Subscription Policy
You may subscribe to certain services or Products. You can cancel your subscription at any time during the 30-day period. After this period, subscriptions will be renewed until canceled.

7. Promotional Offers
Promotional rates or introductory offers may be available for new members. These offers will have specific terms and conditions communicated at the time of the offer.

8. Privacy Policy
We are committed to protecting your privacy. We use information collected, such as email addresses, solely to facilitate and deliver your orders and to promote other products/services. You can opt-out at any time through the unsubscribe link in our emails. For more details, please refer to our Privacy Policy at [Insert Privacy Policy Link].

9. Support
Customer support is available via email. If you experience difficulties, please contact us at [Contact Email]. We are not responsible for technical issues related to your access, device, or location.

10. Disclaimer
The information on this Website is provided on an "AS IS" basis. To the fullest extent permitted by law, we exclude all representations and warranties relating to this Website and its content. This includes, but is not limited to:
	1. No guarantees that the Products will meet your requirements or expectations.
	2. No assurance that the Products will be uninterrupted, timely, secure, or error-free.
	3. You assume all risks of personal injury, including death and damage to property, arising from the use of our Products.
	
11. Fees and Payment Terms
You are responsible for paying all fees associated with your purchases. All fees are quoted in U.S. Dollars, and you must use a valid payment method. By purchasing, you consent to the terms and conditions of our third-party payment processor, [Payment Processor].

12. Payment Terms and Third-Party Payment Processors
Payments for products and services are processed through third-party payment processors, such as [Payment Processor]. By using our Website, you agree to comply with the terms and conditions of these payment processors. We do not store any payment information and are not responsible for any issues that may arise during the payment process.

13. Customer Restrictions
You agree not to:
	• Circumvent or disable security features of the Website.
	• Use the Products in any manner that violates laws or regulations.
	• Share your access or account information with any third party without permission.
14. User Content and Conduct
If our services allow you to share content ("User Content"), you retain all rights to that content. However, you grant us the right to share your User Content as needed. You agree not to post prohibited content, including:
	1. Profane or discriminatory language.
	2. Inappropriate sexual content.
	3. Content that encourages illegal activities.
	
15. Intellectual Property
All content on the Website, including source code, databases, software, and trademarks, is our exclusive property. You may not exploit any of our intellectual property without our prior written consent.

16. Term and Termination
We may terminate your access to the Website and Products at any time, with or without cause. You may stop using our services at any time and can delete your User Account as per the Website features.

17. Indemnification
You agree to indemnify, defend, and hold harmless the Company and its affiliates from any claims or losses arising from your use of the Website or breach of these Terms.
18. Changes to These Terms
We reserve the right to revise these Terms at our discretion. Any changes will take effect immediately upon posting. Your continued use of the services after changes signifies your acceptance of the new Terms.

19. Severability
If any provision of these Terms is found to be unenforceable, the remaining provisions will remain in effect.

20. Governing Law
These Terms are governed by the laws of the State of [State (Spelled Out)]. Any disputes will be resolved in the state or federal courts located in [County], [State Abbreviation].

21. Entire Agreement
These Terms constitute the entire agreement between you and the Company regarding the Website and supersede all prior agreements.

22. Contact Us
For questions or clarifications regarding our Terms or services, please contact us at:
	• Email: [Contact Email]
	• Address: [Full Address]

Create a Disclaimer

How to Use the Create a Disclaimer Prompt