Switch2Zero’s new widget is a quick and easy way to showcase all the good you are doing for the environment to your customers, friends or clients.
In just a few steps you can embed the widget into your website, and demonstrate your focus on sustainability as a business or individual.
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 section titled ‘Live Impact’.
- On the Marketing tab, the last section titled ‘Live Impact’
- Or, 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: Click ‘modify’ and adjust settings like the data the widget shows (CO2e, tree, plastic), background colour settings, text colour 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 on Whether You Want a Live Widget or Image Download
- 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 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.
- If you need further help, there are loads of YouTube videos showing you how to do it - for example:
- Shopify: https://www.youtube.com/watch?v=7T9zulbmIAc
- Wordpress sites: https://www.youtube.com/watch?v=KFNGqil-CyI
- WooCommerce Widget Guide: https://www.youtube.com/watch?v=lYd6WrRxo6A&t=61s
- SquareSpace: https://www.youtube.com/watch?v=PxFoa2eifh8
- BigCommerce: https://www.youtube.com/watch?v=0-AX7KmTb0k
- Magneto: https://www.youtube.com/watch?v=1vs2xjEAbtU
- PrestaShop: https://www.youtube.com/watch?v=ip2dSphjK7s
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.
- Keep in mind that you have access to a selection of pre-made blog posts and social media assets through the marketing tab on your dashboard. This makes it simpler than ever to spread the word about the positive impact you're making.