Home
/
Powerups
/
Feedback widget

Sharing widget

The Sharing Widget makes it easy for your users to copy the link to the page to their clipboard, or share a link on social media.

The sharing widget that we'll be setting up

Copy link button

To make the copy link button work, follow these steps:

  1. Navigate to Project settings and click on the Custom code tab
  2. Paste the following code into the Footer code field
<script>
 var $temp = $("<input>");
 var $url = $(location).attr('href');

 $('.copy-link-button').on('click', function() {
   $("body").append($temp);
   $temp.val($url).select();
   document.execCommand("copy");
   $temp.remove();
 });
</script>

‍

Social media share buttons

The social media buttons need to be replaced with an HTML Embed element to work properly.

  1. Click into the share widget container and delete the last 2 items as seen here:
Figure 1.1
  1. Insert 2 HTML Embed elements in their place. The structure should now look like this:
  1. Give each HTML Embed element a class of Inline Item
  1. Insert the following lines of code, one line into each HTML Embed replacing the "REPLACEME" text with the URL to your page.
<a class="social-button facebook" href="https://www.facebook.com/sharer/sharer.php?u=REPLACEME" target="_blank"></a>
<a class="social-button twitter" href="https://twitter.com/intent/tweet?url=REPLACEME&text=" target="_blank"></a>
  1. If you're setting this up on a dynamic CMS collection page, you'll need to build the link so that it matches your URL structure. Highlight the replace me text, click the "+ Add field" button, and select Slug. Then, build out your URL structure in front of the inserted slug, something like this:
  1. Click Save & Close