Copy To Clipboard Button for Sharing Your Bricks Designs

Updated on 5 Oct 2022

The rising popularity of Bricks combined with cross-site copy and paste available since v1.5.3 means many will soon be looking for a way to share their Sections, Containers and other elements either for free or as part of a premium club.

This tutorial shows how a Copy to Clipboard button can be set up in Bricks so your visitors/site members can copy your Bricks’ element code with a single click and paste in their Bricks site.

We shall change the button’s text to “Copied!” once it is clicked and back to “Click to Copy” after a couple of seconds.

Page

Create a Page in which you would like to have the Copy button. Edit it with Bricks.

Add a Section.

Add a Button element inside the Section’s Container.

Set its text to read something like “Click to Copy”.

Set the Link type to External URL and the link to #.

Go to STYLE → Custom CSS and add this as the CSS ID: copy-btn.

Go to STYLE → ATTRIBUTES and add a new attribute having the name of data-code and for the value, paste your element’s code.

If the JSON code contains dynamic data tags like

you would need to replace all instances of { with

{

and all instances of } with

}

using a text/code editor like Sublime Text or Visual Studio Code. This works around the problem of the tags getting rendered in the JSON on the frontend.

Add a Code element having:

<script>
  function updateClipboard(newClip) {
    navigator.clipboard.writeText(newClip).then(() => {
      console.log('clipboard successfully set')
    }, () => {
      /* clipboard write failed */
    });
  }

  document.addEventListener('DOMContentLoaded', () => {
		document.querySelector('#copy-btn').addEventListener('click', (e) => {
      // store the original button text
      const buttonText = e.target.textContent
      
      // prevent the default link behavior
      e.preventDefault()
      
      // call the updateClipboard function whilst passing the "code" data attribute's value to it
      updateClipboard(e.target.dataset.code)
      
      // change the button text
      e.target.textContent = 'Copied!'
      
      // restore the original button text after 2s
      setTimeout(() => {
        e.target.textContent = buttonText
      }, 2000)
    })
	})
</script>

Template

We can set up a custom field, populate it with Bricks’ element’s JSON and set the field’s value as the data attribute’s value so we can have Copy to Clipboard button per post.

For example, Text type of custom field for post post type: bricks_code

Now edit your Post(s) and paste the JSON in the field and publish/update.

Follow what’s written under the Page heading above – but in a Bricks template that applies to all posts.

Create a custom function that returns the value of your custom field wrapped in htmlentities() after { and } have been replaced with their corresponding HTML character codes.

If using ACF:

function bl_get_cf() {
    $json = get_post_meta( get_the_ID(), 'bricks_code', true );

    $json = str_replace( '{', '{', $json );
    $json = str_replace( '}', '}', $json );

    return htmlentities( $json );
}

where bricks_code is the custom field’s name/ID.

Paste this for the data-code attributes value:

---

References:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

https://stackoverflow.com/a/69973457

https://forum.bricksbuilder.io/t/wait-svg-html-code-does-not-copy-with-copy-paste-function/6385

https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#examples

https://www.w3schools.com/Php/func_string_htmlentities.asp

https://www.rapidtables.com/web/html/html-codes.html