<div class="m-4">
  <a id="CTAButton" class="inline-block bg-blue-600 hover:bg-gray-800 text-white font-medium rounded-lg px-6 py-4 leading-tightn" href="#" onclick="console.log('Flushing');client.flush();">Do thing!</a>


<p class="my-3 text-gray-500">The above button CTA text has three variations targeting 1/3 of users each for a measured experiment that will track clisks. Click the change user button to send a new random user to LaunchDarkly. Note that the text may not change for every user as the targeting is randomized.</p>
<button onclick="changeUser()" class="inline-block bg-gray-900 hover:bg-gray-800 text-white font-medium rounded-lg px-6 py-4 leading-tight">Change User</button>
<p class="my-3">Current User: <span id="userID"></span></p>
</div>

const elUserID = document.getElementById("userID");

async function changeUser(id) {
  const newUser = id || self.crypto.randomUUID();
  await client.identify({ key: newUser })
  elUserID.innerText = newUser;
}

function changeButtonText(text) {
  const elCTAButton = document.getElementById("CTAButton");
  elCTAButton.innerText = text;
}

user = {
   key: self.crypto.randomUUID(),
 };
elUserID.innerText = user.key;

const client = LDClient.initialize("62fe31bdd28cd612550340ec", user);
client.on("ready", function () {
  // STRING FLAG
  const CTAtext = client.variation("cta-text", "Do Thing!");
  changeButtonText(CTAtext);
  client.on("change:cta-text", function (flagValue) {
    changeButtonText(flagValue);
  });
});