Add a Copy to Clipboard Button Using Dynamic Content for Elementor

Introduction

We see them on lots of websites — a button to copy some text to the clipboard. The copy to clipboard button is a nice convenience that is faster and less prone to error than manually doing a selection and copy. For example, here is the copy to clipboard button from YouTube for sharing a video.

It is now possible to easily add a copy to clipboard button to your Elementor pages and templates using this feature from the Dynamic Content for Elementor plugin. In this short tutorial we will walk-through how it works.

Video Version

Three Examples

The Dynamic Content Copy to Clipboard button has three types of text that can be copied: a single line text field, a multi-line text area field, and a code field.

Text Field

Some common use cases for copying a single line text field is for an email address, a software license key, or a coupon code. In this example, I added the Dynamic Content Copy to Clipboard button to a row with several columns. The button expands to fill the width of the column, so by dividing the row into several columns it was easy to control the size. In my example we copy a coupon code. The code “Discount50” is read only and the button is on the right.

There are two content parts, the button settings and the content settings. For the button settings, the “Text” area is where you put the button text.

By default, the button is left aligned and at first clicking on the Alignment options didn’t do anything. I noticed however, if you change the text then the alignment changes. Left and right align seemed to be the only working options.

You then also have a number of options related to the button icon.

The “Content” settings are where you select whether the Type will be a single line, a text area, or code. In this case, the single line option is chosen. Then you can add the Text that will be copied.

There are options to make the text that will be copied hidden and to make the text read-only, which is what I did.

The Style and Advanced tabs for the single line text field have pretty standard Elementor styling options.

Text Area Example

The second example is where the content to be copied fills a text area, or multi-lined text field. In this example, the text is a poem which can be edited.

The text area fills the entire column and by default the button is on a line above the text area. That looked a bit odd, so I selected the Justified button align option, which resulted in the button being full width above the text area.

In the Content settings I selected the middle, text area, option. I set the content to be visible, but did not make it read-only so that the visitor can change the poem before copying it to the clipboard.

On the Style tab the settings for Button and Content were the same as for the first example, but now there was a third area for styling the text area.

The styling of the text area allowed for adjusting the number of lines (height) and some of the button properties.

Code Content Example

The third type of content supported by the Copy to Clipboard button is for “code.” This shows the content on the front-end in a code editor box with syntax highlighting. Here is a screenshot from within the Elementor editor. Note that the code doesn’t show in the editor.

For this example I entered the text for the button to indicate that the code snippet would be copied to the clipboard.

Again, the button is justified align across the top of the code area since that seem to look the best to me.

In the content options, I selected the rightmost option for Type, which is the Code option. For the code example, I pasted in a PHP snippet for WordPress to limit the number of post revisions. This is the kind of thing you might add in an article where you wanted to include code samples.

You have the option to select the computer language so that the syntax highlighting is correct. There is also an option for selecting the “theme” for the code editor. I selected a dark theme and toggled the content to be read-only.

Summary and Conclusions

Here is a final page that includes all three examples. On the page, the coupon code and code snippet are read-only, but the Valentine Poem can be edited before being copied. Also see that the button is constrained in the first example to the column it is in, but in the other examples it is full width. The code snippet shows the code on the front-end.

When you add the widget the editor there are two parts to the content, the button and the content to be copied. The alignment and placement of the button took a bit of trial and error to figure out, however, once I understood what to expect then adjusting the button settings was pretty straightforward.

The option to have the content portion editable or read-only was a nice touch, as was the ability to set a theme for the code view. It would have been nice to have the entered code content shown in preview in the Elementor editor, though it looked good on the front-end. Another thing to note is that the content could be pulled dynamically from the database, making the Copy to Clipboard button usable in content templates.

The Dynamic Content for Elementor Copy to Clipboard button is easy to use and the copy to clipboard functionality worked as expected on the resulting page. The widget adds a nice convenience function for site builders.

Visit the Dynamic Content for Elementor Website