Skip to content

Instantly share code, notes, and snippets.

@rmanalan

rmanalan/feature-flag-example.html

Last active October 5, 2020 21:00
Show Gist options
  • Save rmanalan/ed3f3fb60de837a6061d076c4be8c5d2 to your computer and use it in GitHub Desktop.
Save rmanalan/ed3f3fb60de837a6061d076c4be8c5d2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rmanalan revised this gist Oct 5, 2020. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion feature-flag-example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,8 @@ <h1>Hello World!</h1>
    // User is anonymous, but will be uniquely identified
    // so that subsequent visits obtain the same flag variation
    var user = { anonymous: true };
    var ldclient = window.LDClient.initialize("xxxxxxxxxxxxxxxxxxxxxxxxx", user);
    // Obtain a client-side ID from https://app.launchdarkly.com/settings/projects
    var ldclient = window.LDClient.initialize("<client-side-ID>", user);

    // Wait for client to initialize, before checking flag variations
    ldclient.on("ready", function() {
  2. rmanalan revised this gist Oct 5, 2020. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions feature-flag-example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,8 @@ <h1>Hello World!</h1>
    </p>
    </body>
    <script>
    // User is anonymous, but will be uniquely identified
    // so that subsequent visits obtain the same flag variation
    var user = { anonymous: true };
    var ldclient = window.LDClient.initialize("xxxxxxxxxxxxxxxxxxxxxxxxx", user);

  3. rmanalan revised this gist Oct 5, 2020. 1 changed file with 11 additions and 10 deletions.
    21 changes: 11 additions & 10 deletions feature-flag-example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,21 +6,22 @@
    <body>
    <h1>Hello World!</h1>
    <p>
    My first feature flag is <b><span id="flag"></span></b>.
    My first feature flag is <b><span id="flag"></span></b>
    </p>
    </body>
    <script>
    var user = { anonymous: true };
    var ldclient = window.LDClient.initialize("xxxxxxxxxxxxx", user);
    var ldclient = window.LDClient.initialize("xxxxxxxxxxxxxxxxxxxxxxxxx", user);

    // Wait for client to initialize, before checking flag variations
    ldclient.on("ready", function() {
    document.getElementById("flag").innerHTML = ldclient.variation("my-first-flag", false);

    // Listen for changes to the flag. Update in realtime when it changes.
    ldclient.on("change:my-first-flag", function(newVal, prevVal) {
    document.getElementById("flag").innerHTML = newVal;
    });
    document.getElementById("flag").innerHTML = ldclient.variation("my-first-flag", false);
    });

    // Listen for changes to the flag. Update in realtime when it changes.
    ldclient.on("change:my-first-flag", function(newVal, prevVal) {
    document.getElementById("flag").innerHTML = newVal;
    });

    </script>
    </html>

    </html>
  4. rmanalan created this gist Oct 5, 2020.
    26 changes: 26 additions & 0 deletions feature-flag-example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://unpkg.com/[email protected]/dist/ldclient.min.js"></script>
    </head>
    <body>
    <h1>Hello World!</h1>
    <p>
    My first feature flag is <b><span id="flag"></span></b>.
    </p>
    </body>
    <script>
    var user = { anonymous: true };
    var ldclient = window.LDClient.initialize("xxxxxxxxxxxxx", user);

    ldclient.on("ready", function() {
    document.getElementById("flag").innerHTML = ldclient.variation("my-first-flag", false);

    // Listen for changes to the flag. Update in realtime when it changes.
    ldclient.on("change:my-first-flag", function(newVal, prevVal) {
    document.getElementById("flag").innerHTML = newVal;
    });
    });
    </script>
    </html>