How to add a quote sharing feature to your Webflow site (works in ALL browsers)
Memberscripts needed
https://www.memberstack.com/scripts/share-link-highlighted-text
Tutorial
Cloneable
Why/Use Cases
- Easily share links to exact portions of texts within articles.
- Easily quote a source by linking to the exact place in the text where you’re quoting from.
Adding a quote sharing feature to a Webflow site
Sometimes you want to share an article with someone while sending them directly to a specific spot in that article, and this guide will help you implement that functionality on your website.
The way it works is simple: once a user selects a portion of text, a unique URL will be generated in the browser address bar which can be shared with anyone. The link will send others to that specific portion of text and also highlight it. As for compatibility, this works with all browsers.
To add a quote sharing feature to your Webflow site, we’re going to use MemberScript #116 – Share Highlighted Text Links. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Setting it up
The first thing you need to do is create a CSS class called .ms-highlight – or, if you prefer something else, you can name it whatever you want.
Now go ahead and style this class by choosing a background color – it can be anything you want, this is the color of the text highlight when sharing a link to that specific portion of text.
Making it work
Now that you’ve got everything configured and your form’s set up in Webflow, all you need to do is add the MemberScript #116 custom code to your page (or sitewide if that’s what you want), before the closing body tag.
Keep in mind that if you used a different class name in the first step, you’ll need to edit the custom code and replace ms-highlight with whatever you named your class.
Conclusion
That’s everything, you can now go ahead and test your site’s quote sharing feature.
If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.
Our demo can help you add a quote sharing feature to any Webflow site that works with all browsers.
Take me to Cloneable!
Written by
Ovidiu
Contributor