Hey everyone! Today I'd like to show you how we created LCBC's dynamic invite tool on our "big 3" pages (Christmas, easter, at the movies). This guide will focus on the desktop version of our tool.

Why do we need a desktop specific tool?

We love the idea of using the device's (navigator.share) JavaScript API, however that API isn't supported on many popular desktop browsers, so we needed to create an alternative solution.

Background

The solution that we came up with involves this codepen for the basic design, a content channel which holds URL, the share message, and some other style goodies that you are free to add, but basically we need buttons for each item we'd like to share. In our case it's 3. I'm also assuming you've pulled in your content channel. In this case we have one for each item that we'd like to link to. I'm assuming you know how to pull your attributes. The first change I would make to the codepen is to add a class to each of the a tags as well as the button. Adding identifiers  will be useful later to set the link based on the which button we've clicked, and which button we have clicked.

Stir it up and make it all taste good.

If you've been following the codepen, it has only one button. That's an issue if you're trying to invite people to a holiday service but also would like to add an option to have a general invite as well. So we're gonna change it up a little. The first change we're going to make is that we want the model to pop up with each click. We need to make an event listener for both buttons. This requires us to create a variable to capture with the QuerrySelector.

const shareButtonMajorInviteId = document.querySelector('#share-MajorInviteId');
const shareButtonMinorInviteId = document.querySelector('#share-minorInviteId');
shareButtonMajorInviteId.addEventListener('click', event =>{
    shareDialog.classList.add('is-open');
})
shareButtonMinorInviteId.addEventListener('click', event =>{
    shareDialog.classList.add('is-open');
})

We're also going to have to add all the different links in, so we need to set a variable to each button. So within each addEventListener, we need to declare variables for each button. Add this code before the "shareDialog.classList.add('is-open');" line. like the following. I will be showing the shareButtonMinorInviteId function, but you should the following steps on all of the addEventListener functions.

shareButtonMinorInviteId.addEventListener('click', event =>{
    let facebookbutton = document.querySelector(".facebook");
    let twitterbutton = document.querySelector(".twitter");
    let linkedInbutton = document.querySelector(".linkedIn");
    let emailbutton = document.querySelector(".mail");
    let copyText = document.querySelector(".pen-url")
    let copyButton = document.querySelector(".copy-link")
    let title = document.querySelector(".dialog-title")shareDialog.classList.add('is-open');
})

Now that we've declared variables it's LavaScript time! Set the variables to the correct link location for the content's variable. We add the following below the code written above. You're also going to want to add the correct lava print commands & variable setting to both addEventListener functions.

shareButtonMinorInviteId.addEventListener('click', event =>{
    let facebookbutton = document.querySelector(".facebook");
    let twitterbutton = document.querySelector(".twitter");
    let linkedInbutton = document.querySelector(".linkedIn");
    let emailbutton = document.querySelector(".mail");
    let copyText = document.querySelector(".pen-url")
    let copyButton = document.querySelector(".copy-link")
    facebookbutton.href = "https://www.facebook.com/sharer/sharer.php?u={{ PromotedInviteTargetURL | EscapeDataString }}"
    twitterbutton.href = "https://twitter.com/intent/tweet?url={{ PromotedInviteTargetURL | EscapeDataString }}&text={{ PromotedInviteShareMessage | EscapeDataString }}"
    linkedInbutton.href = "https://www.linkedin.com/sharing/share-offsite/?url={{ PromotedInviteTargetURL | EscapeDataString }}"
    emailbutton.href = "mailto:?subject={{ PromotedInviteEventTitle | EscapeDataString }}&body={{ PromotedInviteShareMessage | Append:' ' | Append:PromotedInviteTargetURL | EscapeDataString }}"
    let title = document.querySelector(".dialog-title")shareDialog.classList.add('is-open');
})

voilà! you've created a dynamic invite tool that changes depending on which invite you have selected.