Recipe - Easy Copy Url Shortcode for Public Links

Skill level: Intermediate

Organization: Bayside Covenant Church

Requires Rock: 1.14.0

{# strip images & classes from the HTML but otherwise leave structure #}

Getting the public, sharable URL for event registrations and forms can be challenging for staff. This recipe shows you how to create a copy widget that you can place on any page to get a public URL, making it easy for staff to get and share a link.

Technically this shortcode could be used to copy any text, not just links.

Lava Shortcode

Setup a lava shortcode using the shortcode markup below.

<style>
    #form-share-container{
        display: flex;
        width: fit-content;
        align-items: center;
        padding: 10px;
        justify-content: flex-end;
        border-radius: 8px;
        align-items: flex-end;
    }
    #form-share-container input {
        border: 1px solid lightgray;
        line-height: 16px;
        font-size: 14px;
        padding: 8px 12px;
    }
    #form-share-container a{
        cursor: pointer;
        padding: 8px 12px;
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
        color: #fff;
        background-color: #00aada;
        border-radius: 0;
        border: 1px solid #00aada;
    }
    #form-share-container .fas {
        line-height: 16px;
        font-size: 14px;
        padding: 8px 12px;
        background-color: darkgray;
        border: 1px solid darkgray;
        color: white;
        border-radius: 8px 0 0 8px;
    }
</style>

<div id="form-share-container">
    <i class="fas fa-share-square"></i>
    <input id="share-form" type="text" aria-label="copy link input" value="{{ input }}" readonly tabindex="-1">
    <a class="btn" id="copy-button" onclick="copyText()">{{ buttontext }}</a>
</div>
{% if subtext !='' %}
<p style="margin-top:-5px;padding:0 10px;"><small>{{ subtext }}</small></p>
{% endif %}

<script>
function copyText() {
  event.preventDefault();  // prevent default action (page reload)
  let copyText = document.getElementById("share-form");
  let copyButton = document.getElementById("copy-button");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
  copyButton.style.backgroundColor = 'Green';
  copyButton.style.border = '1px solid Green';
  copyButton.innerHTML = 'Copied &check;';
}
</script>

Screenshot below just in case plain text doesn't render.

Basic settings, description, documentation.

Include these parameters (ensure the key on the left is always lowercase).

Using the Shortcode with a Registration Instance

Any block on the internal registration instance pages should be able to add the code below. In our case, we added it to the pre-html of the registration instance - navigation block so that it would appear just above the tabs. 

Side note: Every tab on that page is actually a link to a separate page with a different block. For us, we added this code to each of those blocks so that the copy widget would appear across all of them. One advanced option is to save the code in your content folder and then use a lava "include" to include it on each page without having multiple versions of it to upkeep. 

Your code may vary from ours, the main point is that you need to capture the link to your public page and insert it into the lava shortcode as the "input".

In the example below, we've chosen to only return the first slug from linkages, or return the query parameter version of the link if a slug hasn't been set.

{% assign instanceId = PageParameter.RegistrationInstanceId %}
{% if instanceId !=0 %}
{% eventitemoccurrencegroupmap where:'RegistrationInstanceId == {{ instanceId }}' iterator:'maps' limit:1 %}
    {% assign size = maps | Size %}
    {% if size > 0 %}
        {% for map in maps %}
        {% if forloop.first %}
            {% assign slug = map.UrlSlug | WithFallback:'','' %}
            {% assign groupName = map.Group.Name %}
            {% if slug != '' %}
                {% capture link %}{{ 'Global' | Attribute:'PublicApplicationRoot' }}registration/{{ slug }}{% endcapture %}
                {[ copyinput input:'{{ link }}' buttontext:'Copy Link' ]}
            {% else %}
                {% capture link %}{{ 'Global' | Attribute:'PublicApplicationRoot' }}registration?RegistrationInstanceId={{ instanceId }}{% endcapture %}
                {[ copyinput input:'{{ link }}' buttontext:'Copy Link' ]}
            {% endif %}
        {% endif %}
        {% endfor %}
    {% else %}
        {% capture link %}{{ 'Global' | Attribute:'PublicApplicationRoot' }}registration?RegistrationInstanceId={{ instanceId }}{% endcapture %}
        {[ copyinput input:'{{ link }}' buttontext:'Copy Link' ]}
    {% endif %}
{% endeventitemoccurrencegroupmap %}
<hr>
{% endif %}

Using the Shortcode with a Form Builder Form

The code for form builder is much easier since there aren't any linkages to worry about. The main setup pieces are: 

  1. An HTML content block with Context set to Workflow Type
  2. Make sure the page has a Context Parameter set to WorkflowTypeId
  3. The code below used in the content block. Make sure the URL path matches your own Rock instance.
  4. Bonus: The CreateShortLink filter used to make the Url look nicer when sharing.
{% assign workflowType = Context.WorkflowType %}
{% assign WorkflowTypeGuid = workflowType.Guid %}
{% capture token %}{{ workflowtype.Name | Remove:' ' | Downcase }}{{ workflowtype.Id }}{% endcapture %}

{% capture link %}{{ 'Global' | Attribute:'PublicApplicationRoot' }}form/{{ WorkflowTypeGuid }}/{% endcapture %}
{% assign inputLink = link | CreateShortLink:token,16,True %}

{[ copyinput input:'{{ inputLink }}' buttontext:'Copy Form Link' ]}

Screenshots

  • /GetImage.ashx?guid=5789c42c-49e3-41d7-be75-d7a41f653137
  • /GetImage.ashx?guid=c12c0034-45a4-4f84-9838-ad90eadeb4bd