Hiding a widget

Sometimes, you may want to hide a widget from your website without completely removing it. Whether you're looking to hide it on mobile devices, from your entire site, or simply disable it temporarily, we’ve got a few simple options that can help you with this!

Hiding Widget on Mobile Devices

Would you like to display your widget only on desktop? No problem! 🙌 You can find two easy solutions below.

In the Widget Settings

Some of our apps include a special setting that allows you to display the widget only on desktop or mobile devices. Its location may vary slightly depending on the app, but you can generally find it in the Settings tab → Display Settings → Devices.

Here’s an example of how it looks for the Popup app:

Using CSS Code

You can hide any Elfsight widget on mobile devices by using a CSS code:

@media (max-width: 480px) {
.global-styles, .elfsight-app-WIDGET_ID {
display: none !important;
}
}

In the code above, you'd need to replace WIDGET_ID with the ID of the widget you'd like to hide on mobile.

To apply the CSS code, add it to the Custom CSS section in your widget editor. While the exact section placement may differ depending on the app, it’s usually located under the Style or Appearance tab:

Please note that when using both of these solutions, views on mobile devices will still be counted. 

Hiding Widgets in Elfsight Dashboard

You can easily hide any widget from your website right in your Elfsight Dashboard. Just click on the three dots on the right of a certain widget and select Hide from Website:

Once it's hidden, you'll notice the following icon next to the widget's name:

When you use this setting, the widget won't be visible on your live site and the views won't be counted, while the widget installation code remains integrated into your website's structure.

This option is useful when the widget isn’t displaying as expected on your website. Often, display issues are caused by script conflicts, so it's important to observe the issue within the website’s environment to identify the cause. This way, you can disable the widget temporarily and contact our Support Team for further assistance.

When you're ready to bring the widget back, all you need to do is click the three dots again and press Show on Website:

Commenting out the Installation Code

Another way to hide a widget is by commenting out its installation code. This method is helpful if the widget’s code is added to multiple websites or pages, and you want to exclude it from specific ones. When the widget is commented out, Elfsight views will not be counted.

To comment out a widget, simply add <!-- before the widget’s code and --> after it.

Here’s an example of how the widget's installation code should look when commented out:

Whether you need to hide a widget for testing, troubleshooting, or design changes, these options make it easy to control its visibility on your site. You’re now all set to manage it effortlessly!