Skip to content

Sidebar + tooltip

Our sidebar and tooltips can be programmatically configured by altering the appropriate JavaScript variables. Please note that both can also be configured without any programming knowledge from the corresponding page within the dashboard. The JavaScript variables will always overwrite any configuration set via the dashboard, therefore we recommend to use the configuration option in the dashboard if you want it to apply to all pages.

Code

<script>
//_webwinkelkeur_sidebar = true;
//_webwinkelkeur_sidebar_position = "left";
//_webwinkelkeur_sidebar_top = "300";
//_webwinkelkeur_sidebar_theme = "dark";
//_webwinkelkeur_mobile = "top_bar";
//_webwinkelkeur_mobile_tab = "left";
//_webwinkelkeur_tooltip = true;
//_webwinkelkeur_language = <webshop's default>;
</script>
<script>(function(n,r){var e=document.createElement("script");e.async=!0,e.src=n+"/sidebar.js?id="+r+"&c="+c(10,r);var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t);function c(s,i){var o=Date.now(),a=s*6e4,_=(Math.sin(i)||0)*a;return Math.floor((o+_)/a)}})("https://dashboard.webwinkelkeur.nl",<webshop's ID>);</script>

The code shows the sidebar and enables the tooltips on page load. You have to change <webshop's ID> to the ID of the webshop you want to show the sidebar for. Also, it has all optional configuration variables commented out.

Tooltip

Any element (preferably <a> elements) given a "WebwinkelKeur", "webwinkelkeurPopup" or "webwinkelkeurReviews" class will show a webwinkelkeurAddReview tooltip displaying your rating, reviews count and earned badges experience on hover. When clicked, a popup window will be shown which either equals the sidebars popup or allows the consumer to share their experience directly. This depends on the class chosen, see below for more information.

Warning

When you disable the tooltip, clicking on elements with one of the classes listed below will still open their popup.

webwinkelkeurPopup class

Opens the sidebars popup displaying both WebwinkelKeur's key points and the webshop details. Just like the sidebars popup, it allows the consumer to view the webshops reviews without leaving the popup.

Example

<a href="#" class="webwinkelkeurPopup">We are verified by WebwinkelKeur</a>

webwinkelkeurReviews class

Opens the sidebars popup displaying the reviews. Just like the sidebars popup, it allows the consumer to view WebwinkelKeur's key points and webshop details without leaving the popup.

Example

<a href="#" class="webwinkelkeurReviews">View reviews</a>

webwinkelkeurAddReview class

Opens a popup with a form which allows a consumer to share their experience. This popup is similar to the popup presented when clicking "How do you rate this web store?" on your member page.

Example

<a href="#" class="webwinkelkeurAddReview">How do you rate this web store?</a>

Variables

_webwinkelkeur_sidebar boolean (true)

Enables the sidebar

_webwinkelkeur_sidebar_position string ("left")

On which side of the screen to show the non-mobile sidebar.

_webwinkelkeur_sidebar_top string ("300")

The amount of offset from the top of the screen.

_webwinkelkeur_sidebar_theme string ("dark")

The theme of the sidebar - "dark" or "light"

_webwinkelkeur_mobile string ("top_bar")

Enables the sidebar for mobile visitors and selects its type and position (when relevant). Possible values "none" , "top_bar" or "top", "top_left", "top_right", "top_manual", "bottom", "bottom_left", "bottom_right" , "bottom_manual".

If set to "none" then the mobile sidebar is disabled.

The value "top_bar" enables the "Top Bar" which always shows on the top of your page. Note: This option doesn't work if you have a header or an element with position: fixed;!

All other options enable the mobile sidebar and sets its position.

_webwinkelkeur_mobile_tab string ("left")

Changes the position of the mobile sidebar tab, based on the tooltip's width. This option is not available if _webwinkelkeur_mobile is set to "top_bar".

_webwinkelkeur_tooltip boolean (true)

Enables the tooltip.

_webwinkelkeur_language string (<webshop's default>)

The language of the sidebar and its popup. Besides, setting a specific language, you can also choose to let us decide what language is required either by analysing the url ("url"), language attribute ("html") or preferred language by the visitor ("browser").