Copy to Clipboard button Help

Publishing help General
1

Hello!

I am trying to create a landing page for a Church and they want to invite people using their phone. I was trying to create a button that will copy a string of text, the invite message, to the persons clipboard so it can be pasted into a text message.

Here is a simplified example of what I am trying to do: https://codepen.io/shaikmaqsood/pen/XmydxJ/

I just do not know how to set it up in Webflow.

2

“HTML” side:

  1. Add p element to Webflow
  2. Add id p1 for this p (How To)
  3. Add button element
  4. Select this button go to “add attribute” (How to)
    4.1. Under Name fill: onclick
    4.2 Under Value: copyToClipboard('#p1')

The same idea for #p2 or #hello (2 & 4.2 must match).

JS side:

Add custom code (before body to specific page -or- entire site).

document.addEventListener("DOMContentLoaded", function() {
/*the js code from codepen her */
});

Try this steps, If something goes wrong add your site **URL

  • note: Custom code won’t work under editor or preview mode (Only live website).

clipboard.js

Your code is very basic. If you want more power and options try this library:

Basic Example of custom code inside webflow:

1 Like
3

This topic was automatically closed after 60 days. New replies are no longer allowed.