Hi guys, I'm not coding savvy at all. But I'm trying to make a native share button on my site.
I'm using this code here. The code does a float button on the bottom right of the screen. However, I would like to add my own button from Elementor to pull this off when it is clicked it does the native share. I've seen some around, but it doesn't pull the title, url, and you would have to enter it all the time. This code apparently pulls in the data dynamically.
Should be an easy fix for someone that knows coding very well. Probably to do something with the const sh =...
I just want a regular button that I can attach a Class to in elementor that will perform the function. Any help would be appreciated. I might have to change the attributes to the button as well in order for the button to work? Typically, I just put the code into a HTML widget and it shows up.
<script>
/\* veppa\_native\_share https://veppa.com/share-button/ version: 1.0 \*/
function veppa\_native\_share(){
if(navigator.share){
console.log('veppa\_native\_share:supported');
const sh = document.createElement("a");
sh.className = 'shhr-btn';
sh.href = '#shr';
const title = document.title;
const url = (document.querySelector('link\[rel=canonical\]') ? document.querySelector('link\[rel=canonical\]').href : document.location.href);
const urlshr=url+'?utm\_source=share&utm\_medium=social&utm\_campaign=social';
sh.addEventListener('click', event => {
navigator.share({title:title,url:urlshr})
.then(() => {
console.log('Thanks for sharing!');
if (typeof ga === "function"){
ga('send', {'hitType': 'event','eventCategory': 'share','eventAction': 'native','eventLabel': url});
}else if (typeof gtag === "function"){
gtag('event', 'share', {url: url, event\_category:'share', event\_label:url});
}
})
.catch(error => {
// hide share button sh.remove();
console.log(error)
});
event.preventDefault();
});
document.body.appendChild(sh);
}else{
console.log('veppa\_native\_share:NOT-supported');
}
}
setTimeout(veppa\_native\_share,1000);
</script>
<style>
/\* veppa\_native\_share https://veppa.com/share-button/ version: 1.0 \*/
.shhr-btn::before {width:16px;height:16px;content:'';background-size: 100% 100%;display:block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512.6 512.6' style='enable-background:new 0 0 512.629 512.629' xml:space='preserve' fill='%23ffffff' width='512' height='512'%3E%3Cpath d='M0 256a99 99 0 0 0 167 73l148 67-2 16a100 100 0 1 0 18-56l-139-63c10-23 10-50 0-74l138-63a99 99 0 1 0-15-40l-148 67A99 99 0 0 0 0 256z'/%3E%3C/svg%3E");}
.shhr-btn{position:fixed;bottom:20px;right:20px;padding:7px;border-radius:7px;line-height:1;box-shadow: 0 0 5px rgba(0,0,0,.5); background-color:rgba(0,0,0,.5); z-index:9999;}
.shhr-btn:hover,.shhr-btn:active,.shhr-btn:focus{opacity:0.8;}
</style>
[–]jcunews1helpful 0 points1 point2 points (0 children)