Rewards About Page

Install your custom Rewards About Page as a key landing page to send prospective customers to from marketing materials and for any detailed questions.

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.

We recommend creating a blank page titled “{Brand Name} Rewards” 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” in the code snippet with your program name, using hyphens where spaces occur.

iFrame code - add to body

Example

<iframe id="tandym-rewards" style="width: 100%;" src="https://www.bytandym.com/rewards-overview/your-brand-rewards" 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.

<!-- Begin YourBrand Pay - PAP & Rewards Page -->

<script>
  // Function to set the height of the iframe
function setIframeHeight(height) {
    var tandymIframe = document.getElementById("tandym-program");
    var tandymRewardsIframe = document.getElementById("tandym-rewards");
    if(tandymIframe){
    tandymIframe.style.height = height + "px";      
    } if(tandymRewardsIframe){      
    tandymRewardsIframe.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 & Rewards Page -->

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.