Copy to Clipboard

This nestable button provides an easy way to allow site visitors to copy any text from the page. Either provide the selector for the element with the text on the page, or use dynamic data to fetch to be copied to the clipboard. Supports being used inside repeaters, in lightboxes, used with facets etc.

[Available from OxyExtras 1.4.7+]

This element is nestable, and so can contain any elements inside of the button. For convenience, there are icons, button text and a tooltip built-in to the element, which can adapt when the button has completed copying to give visual feedback to the user.

Note that the site needs to be using HTTPS in order for the copy function to be active.

Text to Copy

Choose the source of the text to copy.

Choose selector – If the content exists on the page, you can use the class/ID of the element as the ‘copy selector’. The copy button will find the text to copy based on that selector. If inside of a repeater, the class given will apply to the element inside of the repeater item with that class.

Dynamic data – if the content isn’t on the page, for eg you may be inside of a repeater and want the user to be able to quick copy the URL of the post, or something from a custom field that isn’t actually being output on that page (for example, a discount code). You can populate with any dynamic data which will then fetch the data from the current post.

Icons

Built-in button icons to give visual feedback when the user copies to their clipboard.

Copy icon – Choose an icon to appear in the button in the default state.

When copy complete – Choose to replace the icon with a built-in animated check/tick, or select a new icon for the copied state.

Icon animation – When the button switches into the copied state, the icons will need to switch. Choose the animation to switch between the two. Fade, SlideUp, FlipX, etc.

Button

Button text – Add optional button text which will automatically change when the copying is complete.

Button active state – The ‘active’ style controls are the styles that will be applied to the button once the copying is successful, for more visual feedback.

Tooltip

Built-in tooltip, useful if not using button text and need a way to show the user what the button is for (as well as give feedback once the copying has been completed)

Tooltip text – Add text inside of the tooltip which will automatically change when the copying is complete.

Show on.. – Either show the tooltip anytime the user interacts with the button by hovering / focusing or only show the tooltip once the copying is complete.

Preferred Popup Placement – By default, the tooltip at the top of the bottom. This can be customised similar to the tooltip eleent.

Offset Skidding – Change the position of the tooltip along the side of the element in which it will appear.

Offset Distance – Add spacing between the edge of the element and the tooltip position

Copied state – There are separate style controls for the copied state to allow for changing the style of the tooltip only once the copying has been completed.

Behavior

Hide if no text to copy – Will keep the button hidden if there’s no content found to copy. Either the dynamic data returned empty or the class/ID there was nothing found.

Button state delay – How long for the button to remain in the ‘copied’ state until it resets back to the default. The default is 3000ms.

Select text after copying – if the text is on the page, this setting will make sure the text that is being copied from the page is also selected after the button is pressed.

Support FAQ

Why isn’t it copying my text?

– First check the browser console. Dev tools > javascript console for a message.

If you see ‘Element to copy not found, check the selector is correct’ – This means the class or ID that has been added as the ‘copy selector’ in the settings can’t be found. It’s probably a typo or a missed . or # at the beginning of the selector. Check the class actually exists on the page it’s being used.

If you see ‘Copy failed’, it means the actual clipboard API has failed. The most likely cause is that the page isn’t HTTPS, or permission isn’t granted due to privacy / security settings in the browser.

If you see ‘Copy text empty’, it means the text being copied is empty. Either the class/ID has no content, or the dynamic data has returned empty for that post. There’s an option in the ‘behavior’ tab to hide the button in this case.

chevron-down