Dynamic Content for Elementor Copy To Clipboard Widget

Add a Copy to Clipboard Button Using Dynamic Content for Elementor

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Share on email
Email

Table of Contents

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.

YouTube share
Click the Share button
YouTube copy to clipboard button
Click the copy button
URL copied and then pasted
Paste the link

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.

Text Field Example 1
Text Field Content Button

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.

Text Field Content Content

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 Field Style Button
Button style options
Text Field Style Context
Content style 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.

Text Area Example
Text Area Content Button

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.

Text Area Content Content

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.

Text Area Style Textarea

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.

Code Example
Code Example Content Button

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.

Code Example Content Content

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.

Cc Final Output

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

Filed under:

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”  

  • good post.
    but how can do this?
    when user click on button, show a alert (Elementor Alert). like= “copied at clipboard!”

  • Elementor Birthday Sale

    Dynamic Content for Elementor Giveaway

    Current Elementor Sales

    elementor360

    Subscribe to the Newsletter

    Do NOT follow this link or you will be banned from the site!
    >
    Scroll to Top