No worries at all, @TJ-Pitchstr 
Hi @Marine.Hovhannisyan, I’m brand new to Softr, so sorry if this is a silly question but I’m a little lost in trying to set this all up. I was wondering if this code is to create a button in AirTable? Or does this create a button in Softr? My end goal is to have a button in AirTable that when clicked copies some text from a field into the users clipboard. And searching for examples on google this is the only thread that seems to work.
Please let me know if you need other information or clarification.
Hey, I tried to use the code, but it doesn’t work. (I fill in the name of my list detail)
What ist wrong? Maybe it needs an update?
Hi @Marine.Hovhannisyan , how could this code be altered to add a “Copy to Clipboard” button to a CTA block?
I only have one link that needs copied, but most tutorials I have seen are focused on sharing a dynamic list of links through a List Block (or something similar).
Thank you!
Hi @LuisaMarie the code does work, I double-checked on the latest version. The purpose of it is to copy the mentioned url right from your app dynamic block. What do you mean by filling in the name of your list detail?
Hi @TomKrumins I hope you don’t mind me responding instead of my colleague. I will check with my colleague from tech team whether it will be possible or not but would firstly, need to know whether you want cta button to copy to clipboard or there should be a separate button for it? also, which cta block are you planning to use exactly?
Hey, thanks for your reply, I am a bit confused how I can get the current page url dynamic content in the code. And would it be possible to just get the “copy” button without the url as text in front?
Best wishes Luisa
So you need to add this formula in the formula field in your datasource table
'<div class="parent"><input class="left" type="text" value="text to copy"/><button class="right">click to copy</button></div>'
In the formula instead of text to copy you need to add the text that you need to copy and in case it is different for each item, you can use long text field instead and add that formula on each line for each record.
Then add embed field type on your dynamic block and connect it to your formula or long text field and add
<script>
window.addEventListener('get-record-list-details1', (e) => {
setTimeout(() => {
document.body.addEventListener('click', (e) => {
if (e.target.closest('#list-details1 .right')) {
let copyText = e.target.parentNode.querySelector('.left');
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand('copy')
}
});
}, 50);
});
</script>
custom code to that page settings>custom code>header area and replace list-details1 in 2 places to your list details block name. As I understood you need to copy from List Details block. Unfortunately no, the field where the value should appear can’t be hidden, it should be displayed together with the button.
1 Like
Thank you @Maria
I am using the Call to action with a button and styled background CTA Block.
I am open to either option. The goal is to have a quick-click button to copy to clipboard. How that is structured can be more flexible.
Should be possible. Will share more details a bit later
1 Like
Hey @TomKrumins, here is the code. It will copy the text of cta block subtitle. Make sure to not have an action set on the button and replace the blockids in the code with the actual block ids
<script>
window.addEventListener('block-loaded-BLOCKID', () => {
let copyButton = document.querySelector('#BLOCKID button ');
let textToCopy = document.querySelector('#BLOCKID p').innerText;
copyButton.addEventListener('click', function() {
let copyText = document.createElement("textarea");
document.body.appendChild(copyText);
copyText.value = textToCopy;
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
document.body.removeChild(copyText);
})
});
</script>
Great, thank you! I’ll give this a try early next week
2 Likes