@etchteam/recycling-locator

Recycling Locator

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.

Add the widget to your website

To apply to embed the widget on your website, email us at [e-mail].

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

Option 1: Install the script

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">

Option 2: Install the web component

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.

Available settings

Locale

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>

Theme

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>

CSS variables

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: var(--recycling-locator-color-primary-dark);
}

Path

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>

Materials

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>

View the list of available material IDs

ID	Name	Name (cy)
1	Cardboard egg boxes	Bocs cardfwrdd ar gyfer wyau
2	Cardboard fruit and veg punnets	Basgedi cardfwrdd ar gyfer ffrwythau a llysiau
3	Cardboard sleeves	Cloriau cardfwrdd
4	Cereal boxes	Bocsys grawnfwyd
5	Corrugated cardboard	Cardfwrdd gwrymiog
6	Food and drink cartons	Cartonau bwyd a diodydd
7	Toilet roll tubes	Rholiau papur tŷ bach
8	Greeting cards	Cardiau cyfarch
9	Brown envelopes	Amlenni brown
10	Junk mail	Llythyrau sgrwtsh
11	Magazines	Cylchgronau
12	Newspapers	Papurau newydd
13	Shredded paper	Papur wedi’i falu
14	Telephone directories	Cyfeirlyfr ffôn
15	Window envelopes	Amlenni ffenestr
16	Yellow Pages	Tudalennau melyn
17	Books	Llyfrau
18	Aluminium foil	Papur alwminiwm
19	Foil trays	Hambyrddau papur arian
20	Glass bottles and jars	Poteli a jariau gwydr
21	Ovenware (pyrex)	Llestri popty (pyrex)
22	Window glass	Gwydr ffenestri
23	Aerosols	Erosolau
24	Drinks cans	Caniau diodydd
25	Food tins	Tuniau bwyd
26	Metal lids from glass jars	Caeadau metel jariau gwydr
27	Scrap metal	Metel sgrap
28	Batteries	Batrïau
29	Bicycles	Beiciau
30	Cork	Corcyn
31	Spectacles	Sbectol
32	Stamps	Stampiau
33	Upholstered furniture	Dodrefn wedi eu clustogi
34	Non-upholstered furniture	Dodrefn heb eu clustogi
35	Bric-a-brac	Mân drugareddau
36	Non-electric toys & games	Tegannau a gemau anelectronig
37	Toner & printer cartridges	Cetris peiriant argraffu
38	Ceramics	Llestri
39	Water filters	Hidlydd dŵr
40	Prams & pushchairs	Pramiau a choetsys cadair
41	Records, CDs & DVDs	Recordiau, CD a DVD
42	Household cleaner & detergent bottles	Poteli hylifau glanhau
43	Plastic milk bottles	Poteli llaeth
44	Plastic drinks bottles	Poteli diodydd
45	Toiletries & shampoo bottles	Poteli sebon a siampŵ
46	Plastic carrier bags	Bagiau siopa
47	Food pots & tubs	Potiau a thybiau bwyd
48	Margarine tubs	Tybiau margarin
49	Plant pots	Potiau planhigion
50	Plastic trays	Hambyrddau plastig
51	Yoghurt pots	Potiau iogwrt
52	Clothing	Dillad
53	Household linens	Llieiniau’r cartref
54	Shoes & bags	Esgidiau a bagiau
55	Fridge & freezers	Oergelloedd a rhewgelloedd
56	Electric cookers & ovens	Poptai trydan
57	Washing machines & dryers	Peiriannau golchi a sychu
58	Laptops	Cliniaduron
59	Computers	Cyfrifiaduron
60	TVs	Setiau teledu
61	DVD/CD players	Chwaraewyr DVD/CD
62	Hi-fi	Hi-fi
63	Telephones/fax	Teleffonau/ffacs
64	Mobile phones	Ffonau poced
65	Cameras	Camerâu
66	Toasters, kettles, & vacuums	Peiriant tostio, tegell, sugnwr llwch
67	Hairdryers & electric toothbrushes	Sychwr gwallt, brws dannedd trydan
68	Electrical home & garden tools	Offer trydan i’r cartref a’r ardd
69	Electronic toys & games	Tegannau a gemau electronig
70	Energy-saving light bulbs	Bylbiau arbed ynni
71	Microwave	Microdon
72	Table lamps	Llampiau bwrdd
73	Kitchen oils	Olew coginio
74	Cleaning fluids	Hylif glanhau
75	Paint, varnish	Paent, farnais
76	Paint (for reuse)	Paent (i’w ailddefnyddio)
77	Gas bottles	Poteli nwy
78	Tyres	Teiars
79	Car batteries	Batrïau ceir
80	Engine oil	Olew peiriant
81	Bricks, rubble & concrete	Briciau, rwbel, concrit
82	Soil	Pridd
83	Asbestos	Asbestos
84	Doors, beams, fireplaces	Drysau, trawstiau, llefydd tân
85	Scrap wood	Coed sgrap
86	Flowers	Blodau
87	Grass cuttings	Torion gwair
88	Leaves	Dail
89	Plants	Planhigion
90	Prunings & twigs	Brigiau a thorion llwyni
91	Weeds	Chwyn
92	Christmas trees	Coed Nadolig
93	Bread	Bara
94	Cakes & pastries	Teisennau, cacennau
95	Dairy products - eggs, cheese & milk	Cynnyrch llaeth – wyau, caws, llaeth
96	Raw & cooked meat including bones	Cig amrwd neu wedi’i goginio, gan gynnwys esgyrn
97	Raw & cooked fish including bones	Pysgod amrwd neu wedi’u coginio, gan gynnwys esgyrn
98	Raw & cooked vegetables including peelings	Llysiau amrwd neu wedi’u coginio, gan gynnwys plicion
99	Rice	Reis
100	Pasta	Pasta
101	Beans & pulses	Ffa a chodlysiau
102	Uneaten food & plate scrapings	Bwyd heb ei fwyta a chrafion platiau
103	Tea leaves, tea bags & coffee grinds	Dail te, cydau te a gwaddod coffi
104	Uneaten food without packaging	Bwyd heb ei fwyta heb becynnu
105	Paper cups	Cwpanau papur
106	Set top boxes	Blychau-pen-set
107	Routers	Llwybryddion
108	Coffee cups	cwpanau coffi
109	Bread bags	Bagiau bara plastig
110	Glue sticks	Glue sticks
111	Expanded polystyrene	Polystyren ehangedig
112	Frozen food bags	Bagiau bwydydd o’r rhewgell
113	Cereal liners	Bagiau leinio grawnfwyd
114	Delivery bags	Bagiau danfon nwyddau drwy’r post
115	Multi-pack wrapping	Deunydd lapio pecynnau aml-becyn
116	Salad, pasta, and rice bags	Bagiau salad, pasta a reis
117	Cheese, fish and meat wrapping	Deunydd lapio caws, pysgod a chig
118	Crisp packets and sweet bags	Pecynnau creision a bagiau losin
119	Biscuit and chocolate wrappers	Deunydd lapio bisgedi a siocled
120	Baby, pet food, detergent and cleaning pouches	Pecynnau meddal bwydydd babanod, anifeiliaid anwes, glanhawyr a nwyddau glanhau
121	Plastic film lids	Caeadau haenen blastig
122	Toilet roll wrapping	Bagiau papur toiled
123	Plastic lipstick or lip balm tubes	Tiwbiau minlliw neu balm gwefusau
124	Plastic eyeliner or concealer pen	Pen llinellu llygaid neu golur cuddio
125	Plastic concealer or eye shadow tubes (inc applicator)	Tiwbiau colur cuddio neu golur llygaid (yn cynnwys y ffon)
126	Plastic mascara tubes (inc brush, wand)	Tiwbiau masgara plastig (yn cynnwys y brwsh/ffon)
127	Eyeshadow & brow palettes & compacts	Casys powdr colur llygaid ac aeliau
128	Plastic make-up tubes	Tiwbiau plastig sy’n dal colur
129	Plastic lip balm pots	Potiau plastig sy’n dal balm gwefusau
130	Plastic body, hair and face cream pot and tubes	Tybiau a phostiau plastig sy’n dal hylif corff, cynnyrch gwallt neu eli wyneb
131	Plastic body lotion, hand cream and sunscreen tubes	Tiwbiau plastig sy’n dal hylif corff, eli dwylo neu eli haul
132	Plastic refill pouches	Pecynnau plastig meddal ar gyfer ail-lenwi poteli ac ati
133	Plastic sachets, samples and hotel bottle minis	Pecynnau plastig bychain ar gyfer samplau, poteli mini a geir mewn gwestai
134	Plastic dropper bottles	Poteli diferydd plastig
135	Plastic roll-on and stick deodorants	Pecynnau diaroglydd rholiwr neu flocyn diaroglydd plastig
136	Plastic combs	Cribau plastig
137	Plastic contact lens cases	Casys lensys cyffwrdd plastig
138	Plastic toothpaste tubes	Tiwbiau past dannedd plastig
139	Face and hair mask packaging (single use)	Deunyddiau pacio masg wyneb a gwallt (rhai untro)
140	Wipes packets	Pecynnau weips
141	Toothbrushes or electronic toothbrush heads	Brwshys dannedd neu bennau brwshys dannedd electronig
142	Walking aids	Cymhorthion cerdded
143	Absorbent hygiene products (AHP)	Cynnyrch hylendid amsugnol (AHP)
144	Vapes/e-cigarettes	vapes/e-sigarennau
145	Coffee pods	Podiau coffi
146	Asbestos	Asbestos

Public path

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

Content Security Policy (CSP)

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:;

Listening for when the locator has loaded

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');
  });

Contributing

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