Ingredient Widgets
Beautiful cosmetic ingredient lists for your website ✨
Use our widget to embed the ingredients of any product on your site.
We'll generate an easy-to-understand table of the ingredients and what they do.
How it works
We've created three different types of ingredient widgets: an detailed expanded list, and a simple condensed list, and an HTML list.
Before we show you how to use them on your site, here's a demo of each widget to give you an idea of what they look like.
Sample Expanded Widget
<script src="https://skinsort.com/widgets.js" defer></script> <div id='skinsort-widget' data-product='1002' data-type='full'></div>
Sample Basic Widget
<script src="https://skinsort.com/widgets.js" defer></script> <div id='skinsort-widget' data-product='1002' data-type='simple'></div>
HTML Widget (JavaScript-Free)
If you'd rather copy some basic HTML and let your existing website style takeover, use this!
<a target="_blank" href="https://skinsort.com/ingredients/water">Water</a>, <a target="_blank" href="https://skinsort.com/ingredients/alpha-arbutin">Alpha Arbutin</a>, <a target="_blank" href="https://skinsort.com/ingredients/polyacrylate-crosspolymer-6">Polyacrylate Crosspolymer 6</a>, <a target="_blank" href="https://skinsort.com/ingredients/hydrolyzed-sodium-hyaluronate">Hydrolyzed Sodium Hyaluronate</a>, <a target="_blank" href="https://skinsort.com/ingredients/propanediol">Propanediol</a>, <a target="_blank" href="https://skinsort.com/ingredients/ppg-26-buteth-26">Ppg 26 Buteth 26</a>, <a target="_blank" href="https://skinsort.com/ingredients/peg-40-hydrogenated-castor-oil">Peg 40 Hydrogenated Castor Oil</a>, <a target="_blank" href="https://skinsort.com/ingredients/lactic-acid">Lactic Acid</a>, <a target="_blank" href="https://skinsort.com/ingredients/trisodium-ethylenediamine-disuccinate">Trisodium Ethylenediamine Disuccinate</a>, <a target="_blank" href="https://skinsort.com/ingredients/ethoxydiglycol">Ethoxydiglycol</a>, <a target="_blank" href="https://skinsort.com/ingredients/phenoxyethanol">Phenoxyethanol</a>, <a target="_blank" href="https://skinsort.com/ingredients/chlorphenesin">Chlorphenesin</a>
Installation
Navigate to any product page on our site. Below the ingredient list, you'll see an 'Embed' button.
The embed button will open a popup containing the code you need to embed that specific product on your site.
Simply copy-paste the code into your site's source code where you want the list to display. It's as easy as that. The ingredients list will be automatically fetched from SkinSort.
Developer Customization
If you wish to style the widget yourself, you can add the following to your skinsort-widget div tags to prevent our stylesheet from being loaded:
data-style='false'
If you're planning to use the widget in multiple places on your site, you can simply include the script tag once in your site's head area.
<script src="https://skinsort.com/widgets.js" defer></script>With the script tag in your site's head, you just need to include the relevant div tag wherever you want to insert an ingredient list widget.
