Really Good Culture Product Score Widget
The snippet
In order to embed the widget, you need to copy and paste the code below as Custom HTML block within your site's CMS or directly in the code if using a custom implementation
<iframe
src="https://www.reallygoodculture.com/widget/[COMPANY_SEO_NAME]/embed/[PRODUCT_GTIN]"
frameborder="0"
scrolling="no"
allowtransparency="true"
style="backgroundColor: transparent;"
width="190px"
height="130px"
></iframe>The seo name
Please replace the [COMPANY_SEO_NAME] in the src of the iframe with your brand spcific seo name. This is the last part of the url in the reallygoodculture brand bage.
Example:
for htttps://www.reallygoodculture.com/avallen
the seo name is avallen
The current product
Within the src of the iframe above, you see a [PRODUCT_GTIN] placeholder. This is used to identifiy what product is currently being displayed, and tell reallygoodculture to retrieve it's specific scoring
For example, the snippet bellow shows the rating of an 'Oreo' product
<iframe
src="https://www.reallygoodculture.com/widget/avallen/embed/4001638098595"
frameborder="0"
scrolling="no"
allowtransparency="true"
style="backgroundColor: transparent;"
width="190px"
height="130px"
></iframe>this will produce the following result:
By default we require ou to use the GTIN (opens in a new tab) code of a product so we can identifiy
Additionally, we support refering to a broduct by it's Really Good CultureID.
To support this, the [PRODUCT_GTIN] will be replaced with PRODUCT_WF_ID, and an additional [ID_TYPE] placeholder is supported, with values accepted being GTIN, WFID or SID (source id - id of the product as in the source / external partner).
In this case, the widget's signature will be:
<iframe
src="https://www.reallygoodculture.com/widget/[COMPANY_SEO_NAME]/embed/[PRODUCT_GTIN]/[ID_TYPE]"
frameborder="0"
scrolling="no"
allowtransparency="true"
style="backgroundColor: transparent;"
width="190px"
height="130px"
></iframe>and for the Oreo product above, the widget code will be:
<iframe
src="https://www.reallygoodculture.com/widget/avallen/embed/ckk88ij8z0exvfw4e37utdtki/WFID"
frameborder="0"
scrolling="no"
allowtransparency="true"
style="backgroundColor: transparent;"
width="190px"
height="130px"
></iframe>and will produce the same result:
SID example:
<iframe
src="https://www.reallygoodculture.com/widget/avallen/embed/283089/SID"
frameborder="0"
scrolling="no"
allowtransparency="true"
style="backgroundColor: transparent;"
width="190px"
height="130px"
></iframe>Examples
Centered
you can set the width of the iframe to 100% to center the score within the container
<iframe
src="https://www.reallygoodculture.com/widget/avallen/embed/4001638098595"
frameborder="0"
scrolling="no"
allowtransparency="true"
style="backgroundColor: transparent;"
width="100%"
height="130px"
></iframe>Custom color
<iframe
src="https://www.reallygoodculture.com/widget/avallen/embed/4001638098595"
frameborder="0"
scrolling="no"
width="100%"
allowtransparency="true"
style="backgroundColor: #000000;"
height="130px"
></iframe>