Creating a Custom Referral Page

This guide walks you through the steps to create a custom referral page in TRIFFT, allowing members to view and copy their unique referral code using a sleek, mobile-optimized interface.

Step 1: Navigate to Pages in the Content Cockpit

Log in to the TRIFFT Content Cockpit.
Go to the left-hand menu and select Content.
From the dropdown or submenu, click on Pages.
Click on the “Add new page” button at the top-right corner.

Step 2: Set Up the Page Structure

You will now define the layout of your referral page by filling out the available text and HTML blocks.

1. Heading Field

Use this to define or create an engaging title of the referral page.

Copy your referral code and send it to your friend to earn rewards.

2. HTML Body Field

Use the code below to insert the functional copy-to-clipboard experience. This HTML is responsive and styled for mobile display.

Paste the following code into the HTML field:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Copy to Clipboard</title>
  <style>
    body {
      background: #f0f4f8;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: 'Segoe UI', sans-serif;
      margin: 0;
    }

    .copy-container {
      background: #ffffff;
      padding: 2rem;
      border-radius: 1rem;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      max-width: 400px;
    }

    .copy-label {
      font-size: 1rem;
      margin-bottom: 0.5rem;
      color: #333;
    }

    .copy-input {
      padding: 0.75rem 1rem;
      font-size: 1rem;
      border: 2px solid #ccc;
      border-radius: 0.5rem;
      outline: none;
      transition: border-color 0.3s;
      cursor: pointer;
      user-select: all;
    }

    .copy-input:focus {
      border-color: #007bff;
    }

    .copy-button {
      margin-top: 1rem;
      padding: 0.75rem;
      background: #007bff;
      color: white;
      font-size: 1rem;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: background 0.3s;
    }

    .copy-button:hover {
      background: #0056b3;
    }
  </style>
</head>
<body>
  <div class="copy-container">
    <label class="copy-label" for="copyInput">Click input or button to copy your referral code:</label>
    <input
      type="text"
      id="copyInput"
      class="copy-input"
      value="{{member.referral_code}}"
      readonly
      onclick="
        this.select();
        document.execCommand('copy');
        var btn = document.getElementById('copyBtn');
        var originalText = btn.innerHTML;
        btn.innerHTML = 'Copied!';
        setTimeout(function() {
          btn.innerHTML = originalText;
        }, 1500);
      "
    >
    <button
      id="copyBtn"
      class="copy-button"
      onclick="
        var input = document.getElementById('copyInput');
        input.select();
        document.execCommand('copy');
        var btn = this;
        var originalText = btn.innerHTML;
        btn.innerHTML = 'Copied!';
        setTimeout(function() {
          btn.innerHTML = originalText;
        }, 1500);
      "
    >
     Copy
    </button>
  </div>
</body>
</html>

3. Final Text Field

Use the final rich text field for a closing message, something like:

Thank you for using our services! Copy your referral code and send it to your friend to earn rewards.

Step 3: Save and Publish

Click Save at the bottom of the screen.
You may optionally preview the page or assign it to a News or Widget if needed.
Once satisfied, mark the page as Published.

Additional Notes

{{member.referral_code}} will dynamically populate the referral code for the logged-in member.

Updated 5 days ago