A widget is a small, self-contained application that can be embedded into a larger application or website. It sits on the screen showing, or doing, something specific. Common examples include chat services, weather widgets or social media feed widgets.

In our case, the S2Z widget pulls in the data from your dashboard to showcase the environmental impact you are creating - how much CO2e you are offsetting, how many trees you’ve planted and how much plastic you’ve sponsored to be removed.

There’s a couple of options. You can either have an updating widget - which will regularly pull in your data and update your statistics, reflecting the on-going investments you are making. Or you can use the non-updating version - which takes a snapshot of your data, and so reflects your impact at a specific moment in time.

The widget gets embedded into your website - which is quick and easy to do (see below) - so everyone who visits your site will see the difference you are making to the planet’s future.

Yes, the S2Z widget allows customisation in terms of the background it sits on, colour of the text, icon size and style - so you can make it work beautifully with your website’s style. 

The widget will automatically adapt to whatever container you put it in on your website’s CMS - so you have control over size as well.

You can also choose what elements of your impact to show. This is done through the widget's settings before generating its embed code.

Widgets can impact website loading speed, especially if they are data-heavy or poorly optimised. In our case, it is not a data-heavy application, and should not impact your load time at all.

Yes, our widget is designed to be responsive, adjusting to fit the screen size of various devices, including mobile phones and tablets. 

Step 1: Access Widget Code

• Log in to your Switch2Zero account and bring up your Impact Dashboard.
• Depending on the type of account you have with us (personal or business) you’ll find the widget in up to three places.
  • On the main dashboard homepage, look for the third section down titled ‘Show your Sustainability Impact’.
  • On the Marketing tab, the last section titled ‘Live Impact’
  • On the Integrations tab under ‘Live Impact’.
• Click on the action button and it will pull up a draft version of your widget.

Step 2: Configure the Widget

• Customise Your Widget: Adjust settings like the data the widget shows,  background colour settings, text colour and size and style - to ensure it fits in nicely with your website design. You can adjust the size of the widget later.
• Next, save your settings.

Step 3: Decide what kind of widget you want - static or active.

• We offer two options - either you can download the widget as a static image, a snapshot of your impact at the time of download (png or jpeg) to sit on your site, or you can use the live widget function - which updates your impact data in real time(each time the page is refreshed.

Step 4: Install Widget on Your Website

• Access Your Website's Backend: Log in to your website's content management system (CMS) or HTML file area.
• Choose Placement: Decide where you want the widget to appear on your site (sidebar, footer, dedicated page, etc.) and set up the appropriate container or block you want it to sit in.
  • NB: the widget automatically adapts to fit the container or block size you create for it. However, if you want to change the size inside the container, you will have to change the HTML code manually - if you don’t know how to do this, it might be better to ask your web developer.
• Embed the Code: Copy and paste the widget code generated earlier into the HTML section of your chosen container or widget block. 
  • For CMS like WordPress, you may need to use a custom HTML block or widget area.
  • Save Changes: Ensure you save or update the page after embedding the code.

Step 5: Testing and Verification

• View Your Website: Visit your website to see the widget live in action.
• Test the Functionality: If it’s a live data widget, verify that it updates correctly. Check the static image widget for correct display. Any problems - send us a message.
• Troubleshoot if Necessary: If the widget isn’t displaying or functioning correctly, double-check the code and placement. Make sure there are no typos or omitted sections in the code.

Step 6: Inform and Engage Your Audience

• Announce the Widget: Consider creating a blog post or social media content to inform your visitors about the new widget and how it represents your environmental impact.