Streaming live at 10am (PST)

SHARE content as an email Button


#1

Hi All @cyberdave

I am wanting to create a button like the FACEBOOK and TWITTER SHARE buttons, but for an EMAIL.

Any advice would be great.

Thanks

Gareth


#2

Hi @gareth, so are you wanting to just have the default email program pop up with the mail address when clicking the button? If so, you can create a button, maybe put an icon on it or text, then link it using the Email selection in Link settings:

In the example above, there are example text in the fields, where the email would be addressed to bob@gmail.com and the subject can be whatever you want it to be. When user clicks the button, default mail program will open with new message composition and email and subject added to the mail message.

We do not have a built in way to insert the current page url to the mail though, you would need to do some kind of custom coding for that, or use some other custom jquery plugin for this (or embedded sharing service like sharethis.com or something like that.

I hope that helps. Cheers, Dave


#3

Hi @cyberdave @webflow @bartekkustra I have used a simple html code snippet for this share function and it works on the PC but on my mobile phone it scrolls to the top of the container. It should open as an email with subject and url.

The mobile link works on the page (Home) and the link on the page in the folder (EN-Home) it does not work.

Share Link of site
Go to page Home and scroll down to


Here is the html snippet:

Any advice would be great.


#4

Hi @cyberdave @webflow I think the problem lies within the #News in the html that causes it to scroll to the heading of 'NEWS' container- like a nav button would do. As soon as I remove the #News extension on the html it works. Any advice to get the url to specific part of the page without # in the url?

Thanks

Gareth


#5

Instead of what you're doing I've created something slightly different for my last client:

function shareNewsViaMail() {
        var mailText = "";
        $('#newscontent p').each(function() {
            mailText = mailText + $(this).text() + "\n\n";
        });
        var link = "mailto:"
             + "?subject=" + escape("Read this news!")
             + "&body=" + escape(mailText)
        ;

        window.location.href = link;
    }

This nifty script is inside footer custom code in site dashboard. It works very well :) All it does is it's taking content from #newscontent p element and is sending an email with that content inside. It was done for sharing the news. After adding it to the custom code all you have to do is to create an email image and put it on your website just as you have stated above. But instead of using custom code I would suggest to add an image object from Webflow Add Panel and in Settings give it a custom attribute onclick with a value of shareNewsViaMail(); as this is the function name.

For your purposes I would suggest something like this:

function shareFunction() {
    var link = "mailto:"
         + "?subject=Nachhaltigkeitsbericht I GREENFOCUS.CH"
         + "&body=http://www.greenfocus.ch/home"
    ;

    window.location.href = link;
}

that will be linked properly in Custom Attributes (see the function name has changed to shareFunction();

Best,
Bartosz


#6

Hey thanks for the detailed reply @bartekkustra
I added the snippet and it says this:

I copied and pasted your text-Any tips?


#7

You've forgotten to put that in <script></script> tags ;)


#8

Oh of course, webflow makes us lazy coders:-) thanks so much Bartosz


#9

Hi, @bartekkustra,
I realize this is an old post, but I think you've written script for exactly what I need, but I can't seem to make it work.

I'm designing a site for a non-profit, and every month, they have an "Urgent Needs" list for the food pantry. I'm creating a simple form where a user can sign up to receive a monthly update. But I thought I'd also have a button where they can just click and it grabs the list and lets them send an email to themselves right then (for those who don't want to sign up for monthly updates).

Here is my public link: https://preview.webflow.com/preview/deamdecatur?preview=f9bb9b3a7da7a67278dd21964864c51c

It's on the home page, and a few sections down. The apple image in the link block is the trigger. Some of the issues I'm having is that in the custom attributes, I can't assign "onclick" because it says it's reserved. So I assigned "onrelease" instead, which is not reserved, but I don't know if that's causing a problem. Onrelease does pull up an email, but not with any content.

Also, I've assigned the ID "NeedsList" to the rich text block I'm trying to call. I added a test paragraph and added a "p" to the javascript, just to see if it was because my list is an unordered list, but it's not calling either the ul nor the p.

Can you help me out by taking a look? Custom code is the site footer.

Thank you!!


#10