How to create a custom email link that shares page title + url

Design help Custom code
1

484×558 28.4 KB

My purpose here is a “Share this” email button that includes the website’s URL that my guests can email to themselves and / or other friends. How could I make it so the email already includes body content as well?

2

Hello, @Pedro.

For create a link, which will share the content (current page) it is easier to use embed code, because it will need “onclick” attribute, which it reserved by internal Webflow code (you can’t use it in links attributes)

So just create link-block, give it class, style it. Then add embed code widget and paste this snippet.

`<a class="w-inline-block add-your-class-here" href="mailto:?subject=&amp;body=:%20" target="_blank" title="Email" onclick="window.open('mailto:?subject=' + encodeURIComponent(document.title) + '&amp;body=' +  encodeURIComponent(document.URL)); return false;">
</a>`

Don’t forget to change “add-your-class-here” to the classname, that your link will have. When all stylings will be done you can delete Webflow link-block.

Cheers,
Anna

3 Likes
3

This worked like a charm, thank you so much!!

I have a little issue with the code block.

I styled it like you said but when I add top margin on it, there s a weird clone behind it. Check it out:

The code, I copy pasted exactly.

I solved this by giving the element above it some bottom margin, but am curious why this could be occurring…

4

I am glad it worked. :slight_smile:

About “clone” issue I can’t tell you anything without seeing your project, sorry :confused:

5

Going to explore a bit, and try to solve it (sorry, the project is kind of super secret :pensive: ). If I can’t I’ll strip away the secret stuff and send it your way.

Thank you so much for being so responsive!

1 Like
6

Hi Sabanna, could you clarify what you mean by “Then add embed code widget.” When I do that, I get an error saying “This element can’t be nested inside of a Link Block.” Where should this embed code go exactly?

7

Hi, @pai :slightly_smiling:

You don’t have to add embed code inside the link. You are creating the link for visually style it. Then you add the embed code in the place where you want to have a share button and use class name from the link you created before:
“w-inline-block” - pre-defined Webflow class for link
“add-your-class-here” - class for the link that you created

Hope I was able to explain.

Regards,
Anna

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.