Product Score Widget

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>