Hi Everyone,
I also did something like this with the Better Webview component made by Pragmaflow! We can do many things with that! Thanks a lot for making that Pragmaflow!
Here’s the code that I have added inside the component :
Copied from here and I edited a bit.
<!DOCTYPE html>
<html>
<head>
<style>
button
{
height:0px;
width:110px;
border-radius:8px;
padding:0px;
font-size:20px;
font-family: 'Oswald', sans-serif;
height:34px;
cursor:pointer;
background-color:wheat;
}
p {
display:none
}
</style>
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<p id="p1">name</p>
<button onclick="copyToClipboard('#p1')">Copy</button>
</center>
<script>
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
</body>
</html>
In here replace the name
with the magic text!
And don’t paste this code directly to the component. When you’ll try to paste the code you’ll will see a text that say encode from here. Click Here and you’ll will go to a site and you’ll can add this code there. Then press Encode and you’ll will get the encoded result. Then copy that result and paste it in the component and find the place where the name is located in the encoded result ( you’ll can give it a short name to find it easier. Like Na ) and replace there with magic text.
After encoding ( added the encoded result too, if you’ll doesn’t need to encode ) :
%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Cstyle%3E%0Abutton%0A%7B%0A%20%20height%3A0px%3B%0A%20%20width%3A110px%3B%0A%20%20border-radius%3A8px%3B%0A%20%20padding%3A0px%3B%0A%20%20font-size%3A20px%3B%0A%20%20font-family%3A%20%27Oswald%27%2C%20sans-serif%3B%0A%20%20height%3A34px%3B%0A%20%20cursor%3Apointer%3B%0A%20%20background-color%3Awheat%3B%0A%7D%0Ap%20%7B%0A%20%20display%3Anone%0A%7D%0A%0A%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Clink%20href%3D%27https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DOswald%27%20rel%3D%27stylesheet%27%20type%3D%27text%2Fcss%27%3E%20%0A%0A%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0A%0A%3Ccenter%3E%0A%0A%3Cp%20id%3D%22p1%22%3Ena%3C%2Fp%3E%0A%0A%3Cbutton%20onclick%3D%22copyToClipboard(%27%23p1%27)%22%3ECopy%3C%2Fbutton%3E%0A%0A%3C%2Fcenter%3E%0A%0A%3Cscript%3E%0Afunction%20copyToClipboard(element)%20%7B%0A%20%20var%20%24temp%20%3D%20%24(%22%3Cinput%3E%22)%3B%0A%20%20%24(%22body%22).append(%24temp)%3B%0A%20%20%24temp.val(%24(element).text()).select()%3B%0A%20%20document.execCommand(%22copy%22)%3B%0A%20%20%24temp.remove()%3B%0A%7D%0A%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E
In here replace the na
with magic text! ( You can find it on here in the encoded result : 3D%22p1%22%3Ena%3C%
)
See it here in action ( Clonable too ):
Just adding another three examples that you can use this component : Some Tips and Tricks by this Semi Noob! 😅 ( In here Tip 19 , 20 and 21 )
Love to see the Michael’s Code too!
Hope this will work greatly!
Thank you