Program About Page

Install your custom Program About Page as a key landing page to send prospective customers to from marketing materials and for any detailed questions. This page has been designed based on feedback across all our programs and tailored to your specific program configuration.

Tandym hosts this page, and installation requires using an iFrame code snippet within the body of a page you create on your website so that it feels native to your experience. All content has been reviewed and approved by Tandym and our banking partners for regulatory compliance.

Changes can be possible, pending a review. Tandym’s goal is to make this page feel as native as possible within your site.

Placement

We recommend creating a blank page titled “About {Your Program Name}” without additional H1 or other content on the page. Place the iFrame within the body, and for best responsiveness across breakpoints, include the script code before the end </body> tag (if Shopify, include the script code within the theme.liquid file).

At a minimum, we also recommend including pervasive links to this page in your main navigation and/or footer of your site. This will help your customers easily find their way back to this page if they have questions.

Note: make sure you replace “your-brand-pay” in the code snippet with your program name, using hyphens where spaces occur.

iFrame code - add to body

<iframe style="width: 100%;" src="https://www.bytandym.com/merchant/your-brand-pay" id="tandym-program" frameborder="no" scrolling="no"></iframe>

Script Code

If possible, add the script before the end </body> tag.

Shopify: we recommend adding it to the theme.liquid file.

Other Platforms: we recommend adding it to the code file where the iFrame is placed.

Style code - add to header

<!-- Begin YourBrand Pay - PAP -->
<script>
  // Function to set the height of the iframe
  function setIframeHeight(height) {
    var tandymIframe = document.getElementById("tandym-program");
    tandymIframe.style.height = height + "px";
  }

  // Event listener for messages from the iframe
  window.addEventListener(
    "message",
    function (event) {
      // Ensure the message is from the expected origin
      if (event.origin !== "https://www.bytandym.com") {
        return;
      }

      // Parse the message data
      var message = event.data;
      if (message.type === "setHeight") {
        setIframeHeight(message.height);
      }
    },
    false
  );
</script>


<!-- End YourBrand Pay - PAP -->

How it works

The iFrame has a function that calculates the height of its content dynamically and sends a message to its parent (your website) containing the calculated height value. The function on your website (the one above) receives this message and sets the iFrame's height to the received value.