White Arrow icon
Back to all Elements

"Highlight & Share" with Sharect.js (like in Medium)

A lightweight 'Select text and share / tweet'

This is really lightweight and easy!

First we add the script source to our project, before the</body> tag.

* if we want the plugin to work on the entire website we add it in the project's settings under custom code. otherwise we can add it on the page's custom code section.

<script src="https://cdn.jsdelivr.net/npm/sharect@1.1.0/src/sharect.js"></script>


2nd step is to add the code that triggers the plugin. We should add this right after the previous code.

Some options are available, like icon color, background color, which elements can be selected and Facebook share (needs additional code).


 var sharect = new Sharect();




That is about it!

Depending on your page structure, the plugin might be hidden under a higher z-indexed layer, so add this to your <head> tag:


.sharect {

z-index: 9999;





browser mockup
Heart icon

When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.

Might also interest you:

Symbol in RichText


Insert a symbol element into a RichText. On a static or dynamic page.

Read more
Blue arrow iconWhite Arrow icon

Pass Parameters


Pass input fields parameters and add them to the destination URL.

Read more
Blue arrow iconWhite Arrow icon

Hover to reveal Mask


A fixed background image that is revealed by mouse hover all over the section

Read more
Blue arrow iconWhite Arrow icon