onetap_campaign/examples.html at main · xfcced/onetap_campaign · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Examples</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 40px auto;
        padding: 0 16px;
        line-height: 1.5;
      }
      h1,
      h2 {
        margin-bottom: 0.5em;
      }
      ul {
        padding-left: 1.2em;
      }
      a {
        color: #0066cc;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      #raf-text {
        border: 1px solid #ccc;
        padding: 12px;
        border-radius: 4px;
        white-space: pre-wrap;
        margin-top: 8px;
        background: #fafafa;
      }
      button {
        margin-top: 8px;
        padding: 6px 12px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>CRM Example Case Files</h1>

    <ul>
      <li>
        <!-- SK-II Italy CRM Flow -->
        <a href="https://storage.googleapis.com/junction-changlu/SK-II%20Italy%20CRM%20Flow.pdf" download> Download Case 1: SK-II Italy CRM RAF Flow </a>
      </li>
      <li>
        <!-- Pampers Japan CRM Flow -->
        <a href="https://storage.googleapis.com/junction-changlu/Pampers%20Japan%20CRM%20Flow.pdf" download> Download Case 2: Pampers Japan Baby Wipes RAF Flow </a>
      </li>
      <li>
        <!-- Ariel Nordic & China Multi-Language Brief -->
        <a href="https://storage.googleapis.com/junction-changlu/Ariel_Nordic_China_Multi-Language_CRM_Brief.pdf" download> Download Case 3: Ariel Nordic & China Multi-Language CRM Brief </a>
      </li>
    </ul>

    <hr />

    <h2>Case 4 – Pampers Always-On RAF (Summary Text)</h2>

    <div id="raf-text">
      The Always-On Refer a Friend (RAF) program encourages Pampers Rewards users to invite new families by offering $2 Pampers Cash to both the referrer and the new user after the first diaper-pack
      scan, with a maximum reward of $10. The flow targets users who joined over 30 days ago and have fewer than five successful referrals. Communications run over 30 days through inbox cards, push
      notifications, slide-ups, and email, with different messages based on push-opt status and user activity. The tone is supportive, clear, and motivational, guiding users to share their personal
      referral link. Messaging emphasizes ease, value, and the mutual benefit for both parents. If localized versions are required, all content—including any on-image text—must be adapted to the
      target language. For multilingual markets, the flow should support English, Finnish, and Swedish, ensuring culturally appropriate tone and correct language usage across all channels.
    </div>

    <button type="button" onclick="copyRAFText()">Copy Text</button>

    <script>
      function copyRAFText() {
        var text = document.getElementById('raf-text').innerText
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard
            .writeText(text)
            .then(function () {
              alert('RAF text copied to clipboard.')
            })
            .catch(function () {
              fallbackCopy(text)
            })
        } else {
          fallbackCopy(text)
        }
      }

      function fallbackCopy(text) {
        var textarea = document.createElement('textarea')
        textarea.value = text
        document.body.appendChild(textarea)
        textarea.select()
        try {
          document.execCommand('copy')
          alert('RAF text copied to clipboard.')
        } catch (err) {
          alert('Copy failed. Please select and copy manually.')
        }
        document.body.removeChild(textarea)
      }
    </script>
  </body>
</html>