Personalized Copy/Paste Function in In-App Message

I'm new to Braze and want to learn how to integrate a personalized copy/paste function within an in-app message.

For context: my company is looking to trigger this message on our website after a user completes a specific action. This action involves the user making their own custom URL using our website, so we want to include a message pop-up that invites them to copy and paste their link to share. I'm assuming this would involve the use of personalization + the campaign builder? Are there any tutorials or tips on how I can accomplish this? Thanks!!

Find more posts tagged with

In-App Message

web in-browser

Comments

Manoj__

Hello @masocial22

It totally depends on how the URL is generated, Are you using any user attribute to create the URL like a customer loyalty id to check to create referral URL or it is something outside of Braze.

You can create an in-app campaign using the Campaign Builder in Braze and Add personalization where ever required. Then you can use this sample code to allow user to copy the URL

<div class="container">
  <h2>Your link is ready to share!</h2>
  <div class="url-box">
    <span id="custom-url">{{custom_url}}</span>
    <button id="copy-button" onclick="copyToClipboard()">Copy</button>
  </div>
  <p>Share this link with friends and colleagues</p>
</div>

<script>
function copyToClipboard() {
  var urlText = document.getElementById("custom-url").innerText;
  navigator.clipboard.writeText(urlText).then(function() {
    document.getElementById("copy-button").innerText = "Copied!";
    setTimeout(function() {
      document.getElementById("copy-button").innerText = "Copy";
    }, 2000);
  });
}
</script>

LiorPeleg

@masocial22 If you’d like to use the drag & drop editor, you can install our extension to add the coupon block.
It allows you to create a copy-paste coupon feature — no coding required.

Get it here:
https://chromewebstore.google.com/detail/hippo-power-tools-for-bra/klnaclpjbenicaapccooonooopnieekg