Powered by RecycleNow.com, this tool can be used to search and find recycling locations throughout the United Kingdom. It’s been created as an embeddable widget that can be added to any website to help visitors discover more recycling options.

To apply to embed the widget on your website, email us at PartnerEnquiries@wrap.org.uk.

Installation won't work until your application has been approved.

Add the script above the closing </body> tag.

<script src="https://rl.recyclenow.com/wrap-rlw.js" async defer></script>

Include an element with the id "wrap-rlw" into your HTML, this is where the widget will be output.

<div id="wrap-rlw"></div>

Include the global stylesheet (optional)

<link href="https://rl.recyclenow.com/recycling-locator.css">

Install via NPM

npm i -S @etchteam/recycling-locator`

Include the web component in your HTML, this is where the widget will be output.

<recycling-locator></recycling-locator>

Include the stylesheet within your website styles (optional)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@etchteam/recycling-locator@latest/dist/recycling-locator.css">

⚠️ Dependabot is configured to notify daily for NPM version changes, falling out of date means the widget could stop working due to upstream breaking API changes.

Use the locale attribute to set the language.

The language code for Welsh (cy) is currently the only supported language code.

Script

<script src="..." data-locale="cy"></script>

Web component

<recycling-locator locale="cy"></recycling-locator>

Accepted values are red, blue, green, orange, purple, brown, navy, or black.

Script

<script src="..." data-theme="red"></script>

Web component

<recycling-locator theme="red"></recycling-locator>

For more granular control over the theme, add CSS variables to your stylesheet.

:root{
  /* The primary colour is the main color that's changed via theme presets */
  --recycling-locator-color-primary-lightest: #eef5e5;
  --recycling-locator-color-primary-light: #dfefc8;
  --recycling-locator-color-primary: #8dc63f;
  --recycling-locator-color-primary-dark: #297f00;

  /* Other variables control specific parts of the UI */
  --recycling-locator-theme-background: #fff;
  --recycling-locator-theme-background-muted-light: #f5f6f8;
  --recycling-locator-theme-heading-color-light: #222;
  --recycling-locator-theme-color-light: #222;
  --recycling-locator-theme-color-muted-light: #4f4f4f;
  --recycling-locator-theme-color-hover: var(--recycling-locator-color-primary-dark);
  --recycling-locator-theme-border-color-light: #cfd1d3;
  --recycling-locator-theme-border-color-hover-light: var(--recycling-locator-color-primary-dark);
  --recycling-locator-theme-link-color: #0077ab;
}

The initial path to load. Common examples include:

• /{postcode} to pre-fill the location
• /home-recycling for home recycling embeds
• /material?materials=111&search=Cereal boxes to pre-select a material
• /{postcode}/places/{placeName}/{placePostcode} to load a single place

To discover other possible initial path combinations, take note of the path in the URL whilst navigating on the standalone version of the tool at locator.recyclenow.com.

Script

<script src="..." data-initial-path="/home-recycling"></script>

Web component

<recycling-locator path="/home-recycling"></recycling-locator>

This setting is only available for the script installation method for backwards compatibility.

The same can be achieved by passing materials in the path web component attribute.

Example with material id:

<script src="..." data-materials="1"></script>

Example with multiple materials:

<script src="..." data-materials="[1,2]"></script>

This setting is only available for the web component installation method.

This setting can be used to set a public URL to load assets from, the path should always end with a /.

If not provided, jsdelivr CDN will be used.

The following example would serve assets from your websites public directory:

<recycling-locator public-path="/public/"></recycling-locator>

To self-host assets, static files can be moved from node_modules using a postinstall script.

cp -r ./node_modules/@etchteam/recycling-locator/dist/images ./public
cp -r ./node_modules/@etchteam/recycling-locator/dist/translations ./public
cp ./node_modules/@etchteam/recycling-locator/dist/recycling-locator.css ./public
cp ./node_modules/@etchteam/recycling-locator/dist/styles.css ./public

If your website implements a CSP, it'll need some changes based on whether the script or web component installation option is being used.

Script

• img-src data: https://rl.recyclenow.com https://*.here.com;
• script-src https://rl.recyclenow.com 'unsafe-eval';
• connect-src blob: https://rl.recyclenow.com https://*.sentry.io https://*.hereapi.com https://*.here.com;
• style-src 'unsafe-inline' https://rl.recyclenow.com;
• font-src https://*.here.com;
• worker-src blob:;

Web component

• img-src data: https://cdn.jsdelivr.net https://*.here.com;
• script-src 'self' 'unsafe-eval';
• connect-src blob: https://cdn.jsdelivr.net https://rl.recyclenow.com https://*.sentry.io https://*.hereapi.com https://*.here.com;
• style-src 'unsafe-inline' https://cdn.jsdelivr.net;
• font-src https://*.here.com;
• worker-src blob:;

The <recycling-locator> will dispatch a custom "ready" event when the UI has rendered.

document
  .querySelector('recycling-locator')
  .addEventListener('ready', () => {
    console.info('Ready to recycle');
  });

Looking to contribute to the code? A good starting point is the contributing docs.