Adding Share links to your thank you email

Adding Share links to your thank you email is fairly easy, if you're willing to tackle a little bit of HTML.

This is an example of what it could look like.

1. Inserting the HTML "snippet"

• Open your action on the "Emails" step (https://your.impactstack.org/node/123/wizard/emails)
• Scroll down to the WYSIWYG editor and click on the "Source" view. Don't panic! The scrambled view is normal! ;-)

• To make it easier for you, here is a bit of HTML for the share links you can copy and paste and then modify:

<h2>Share this action!</h2>

<div class="content">
	<ul class="share-light">
		<li>
			<a
				href="https://LINK HERE"
				target="_blank"
				title="Share this via E-Mail!"
				>E-Mail</a
			>
		</li>

		<li>
			<a href="mailto:?subject=Subject%20line&body=Email%20body"
				>Share with email client</a
			>
		</li>

		<li>
			<a
				href="https://www.facebook.com/sharer.php?u=https%3A//LINK HERE"
				target="_blank"
				title="Share this via Facebook!"
				>Facebook</a
			>
		</li>

		<li>
			<a
				href="http://twitter.com/share?url=https%3A//LINK HERE&via=YOUR ACCOUNT NAME&hashtags=tag1,tag2&text=tweet%20text%20here"
				target="_blank"
				title="Share this via Twitter!"
				>Twitter</a
			>
		</li>
	</ul>
</div>

 

Now, let's look at the individual elements in this snippet

 

2. <h2>Share this action!</h2>

 This is the headline of your links

 

3. <div> and <ul>

This simply defines that the next lines will be a unnumbered list. The bullet points of the list are then shown as <li> (list)

4. Share via Email

You might find our toolkit useful for creating the share links for Facebook, Twitter, WhatsApp, Facebook Messenger and email:
https://toolkit.impact-stack.org/share-link

<li>
	<a
		href="https://LINK HERE"
		target="_blank"
		title="Share this via E-Mail!"
		>E-Mail</a
	>
</li>

Replace thehref="https://LINK HERE" with the URL you want to share (usually the URL to your action. You might want to add URL parameters and add tracking).

Replace the 'E-Mail' bit with the text you want the Hyperlink to show.

<li>
	<a href="mailto:?subject=Subject%20line&body=Email%20body"
		>Share with email client</a
	>
</li>

A 'mailto' link like this will open your supporter's device's default email client. This might be Apple Mail on an iOS or Mac or Outlook on a Windows PC, for example. This will vary by device. It might be surprising for people to find out that Outlook is opening even though they always use Gmail in a browser.

There are lots of services that help you to easily create these 'mailto' link such as Mailto link generator. You probably only want to add a subject line and a body to the link for a share page like this.

5. via Facebook

You might find our toolkit useful for creating the share links for Facebook, Twitter, WhatsApp, Facebook Messenger and email:
https://toolkit.impact-stack.org/share-link

<li>
	<a
		href="https://www.facebook.com/sharer.php?u=https%3A//LINK HERE"
		target="_blank"
		title="Share this via Facebook!"
		>Facebook></a
	>
</li>

Replace the href="https://www.facebook.com/sharer.php?u=https%3A//LINK HERE" with the URL you want to share (usually the URL to your action. Again, you might want to add URL parameters and add tracking). The "%3A" replaces the colon in the URL, this is called "encoding".

Replace the Facebook with the text you want the Hyperlink to show.

 

6. Share via Twitter

You might find our toolkit useful for creating the share links for Facebook, Twitter, WhatsApp, Facebook Messenger and email:
https://toolkit.impact-stack.org/share-link

<a
	title="Share this via Twitter!"
	href="http://twitter.com/share?url=https%3A//LINK HERE&amp;via=YOUR ACCOUNT NAME&amp;hashtags=tag1,tag2&amp;text=tweet%20text%20here"
	target="_blank"
	rel="noopener"
	>Twitter</a
>

Here you have a few more elements than in the two options before. You can always leave a factor out (like the account or the hashtags) by deleting everything between two "&" plus one of the "&" themselves.

Replace the href="http://twitter.com/share?text=&url=https%3A//LINK HERE" with the URL you want to share (usually the URL to your action. Again, you might want to add URL parameters and add tracking). The "%3A" replaces the colon in the URL, this is called "encoding".

Replace the via=YOUR ACCOUNT NAMEwith your account name (eg more_onion) if you want to automatically have your account mentioned.

Replace the hashtags=tag1,tag2 with the keywords you'd like to have as hashtags. No need to insert the "#".

Replace the text=tweet%20text%20here with the text you'd like to have as tweet. This text needs to be encoded. An easy way to encode text is by using little helpers such as this site.

Replace the Twitter with the text you want the Hyperlink to show.

Test your tweet by copying the following url and replacing the shared url with what you've written. 

URL for testing

https://twitter.com/intent/tweet?url=https%3A//LINK%20HERE&via=YOUR%20ACCOUNT%20NAME&hashtags=tag1,tag2&text=tweet%20text%20here

Example for replacement

https://twitter.com/intent/tweet?url=https%3A%2F%2Fsupport.more-onion.com%2Fhc%2Fen-us&via=more_onion&hashtags=test,demo,twitterparty&text=Congratulations%21+You+can+share+tweets+now%21

7. And now what?

In your WYSIWYG editor deactivate the "source" view. Your email should now look something like this:

Remember: always test your actions with the relevant emails and share links before launching! ;-)