New Element : copy to clipboard button

Feature Requests / Improvements
1

A new element to create a copy to clipboard button would be great. This will actually be a element like the button but with a little difference like:

1- before text : copy to clipboard
2- after text : Copied!
3- The part where we write the desired text to be copied.
4- Different icon for before and after text

8 Likes
2

This would be a helpful addiiton indeed - either as a new element or as an Interaction/s feature of Bricks Builder. For instance, a “copy to clipboard” action when a site visitor “hovers” (trigger) on an element.

3 Likes
3

+1000 to this! I’m a Bricks newcomer, and this is the one function keeping me from absolutely loving the product. Also - copying the article/post link to the clipboard AND the text w/ or w/o the article link is the key I need to have my website grow “word of mouth”. Social sharing is nice, but not many actually use them.

4

In the meantime, we have an element for this in BricksExtras.

1 Like
5

+1 for quality of life’s sake. Could be an interaction.

1 Like
6

And works perfectly.

1 Like
7

Let’s vote for it and hopefully it will be added to the roadmap.

8

+1 on this. I did it with a Javascript snippet but since we are using a visual builder it would be faster to just add the element.

9

I need this right now, gotta figure it out myself

10

Hi @bawar,

welcome to bricks forum :slightly_smiling_face:

Here is a temporary solution I hope it helps you.

1- Add the following code to the Body (footer) scripts. (In Bricks settings or on a specific page via page settings > Custom code)

<script>
  function copyFromId(id) {
    const text = document.getElementById(id).innerText;
    navigator.clipboard.writeText(text);
  }
</script>

2- Set up an interaction on the button or icon element that you want to copy the text by clicking on it, as shown in this screenshot.

3- Now add an element like Basic text and set any text or dynamic value you want in it. Then enter the ID of this element (without the #) as shown in the screenshot above in the Interaction Arguments.

I hope it was helpful :victory_hand:

11

Thanks it was helpful indeed.
My use case was a bit more complicated because it has to copy the active item in a list and the hole thing is a query loop of buttons and lists.
Using your code and ChatGPT I was able to make it work (Code is below). But I don’t think I could make use of Arguments for this case because of the query loop.

  // Attach event listeners automatically to all .brxe-button elements
  document.addEventListener('click', function(e) {
    if (!e.target.closest('.brxe-button')) return; // only handle clicks on buttons
    const button = e.target.closest('.brxe-button');

    // Find the parent query loop item
    const container = button.closest('.citation-block');
    if (!container) return;

    // Find the currently open tab in this container
    const openTab = container.querySelector('.tab-pane.brx-open');
    if (!openTab) return;

    // Get text and copy it
    const text = openTab.innerText.trim();
    navigator.clipboard.writeText(text)
      .then(() => {
        button.textContent = 'Copied!';
        setTimeout(() => {
          button.innerHTML = 'Copy <i class="fas fa-copy"></i>';
        }, 1500);
      })
      .catch(err => console.error('Copy failed:', err));
  });

Edit: typos