Jump to content

[Free Share] Always show Elfsight widget toolbar

Recommended Posts

Hi guys,

Once you created the Elfsight widgets and visit the pages where they are placed, you can sometimes notice this panel shows above the widget when you hover on the it, this toolbar contains some useful info and links
- Edit widget: let you open the widget editor right from the CMS editor, instead of find them from Elfsight widget dashboard

- Views: where you can see how many views per month you have left on the current widget's plan


By default this toolbar is not showing up, you have to hover in order to see it, if you want the panel to show up all the time when you are in Squarespace Edit, let's follow these steps

- Access the Code injection 

Add to Website Tools (under Not Linked) > Code Injection > Footer
- Paste the below CSS snippet

<!-- sqs:beyondspace-elfsight-helper -->
<style>.sqs-edit-mode .eapps-widget .eapps-widget-toolbar,.sqs-edit-mode .eapps-widget .eapps-widget-toolbar-panel{opacity:1;pointer-events:auto}</style>
<!-- /sqs:beyondspace-elfsight-helper -->

and that's it! After saving the code you now can see the Elfsight Widget toolbar persists when entering Squarespace editor, helping you quickly know the current widget's views count and open the widget editor faster

Some notes:

- The trick will be only working with inline widgets for now, since the popup type widget (like the back-to-top) button, the toolbar won't be shown properly

- The toolbar is only available if you are owner of the widget, so rest assure that your visitors won't be able to see these, more info Why I see a panel above my widget

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.