Skip to main content

Widgets

In addition to text links, the Affiliate App allows you to build more complex widgets, like product cards or carousels. You can select a widget in the Widgets section of the app, select your desired product(s), toggle various settings, and then copy and paste the code (a custom div) into your content. When a user visits the page, our SDK will see the div and render the widget within an iFrame.

The widgets iFrame page is built from a NextJS server performing server-side rendering. We cache the page using Fastly; any updates that would affect the page (i.e., editing your product) will clear the cache.

If you are using the WordPress Gutenberg editor as your CMS, you can use the Organic plugin to build and add widgets directly within WordPress without having to copy and paste the div code.

Embeddable Widget Types​

Currently, out of the box Organic Affiliate provides the following embeddable widgets:

  1. Product Cards
  2. Product Carousels

Using Widgets​

There are two ways to use widgets. They can be used regardless of which CMS you use.

Using Widgets in WordPress​

If you're using WordPress and have the Organic Wordpress plugin installed, you can insert widgets using the Gutenberg block editor. To do this:

  1. In WordPress, open the block insertion tool.

  2. Select either the Organic Product Card or Organic Product Carousel block and insert it.

  3. In the window that appears, select the product you'd like to embed.

    info

    If you aren't logged into the Organic platform, you will be prompted to log in. Don't have access? Contact an Organic admin on your team to invite you.

  4. Customize the widget and insert it.

Using Widgets in Other CMSes​

If you aren't using WordPress, you'll need to make sure the Organic Code Snippet (JS SDK) is installed on your site.

  1. In the Affiliate app section of the Organic dashboard, find the product you'd like to embed a widget for.
  2. Click the "Create Widget" icon button in the top right.
  3. Select the widget type you'd like to embed.
  4. Customize the widget.
  5. Copy and paste the widget embed code where you'd like the widget to appear.

— OR —

  1. Navigate to the Affiliate Widgets page in the Organic dashboard.
  2. Select the widget type you'd like to embed.
  3. Customize the widget.
  4. Copy and paste the widget embed code where you'd like the widget to appear.

Styling the Widgets​

Widgets can be styled to seamlessly match your site, or to really stand out by contrasting with your existing content. The fields below can be customized. To change them, please create a support ticket with your desired values.

Product card widget example

AttributeDescriptionTypeExample
Primary action colorThe color to use for button background color and link color. Link color can be overridden below.hex color code#669900
Background colorThe background color to use for the widget.hex color code#ffffff
Link colorThe color to use for links in the widget. Defaults to "Primary action color" if not set.hex color code#00ffcc
Text colorThe text color for non-link text inside the widget. Should normally match the <body> font color of your site.hex color code#000
Font familyThe font family to use for text in the widget. Should normally match the <body> font-family of your site.CSS font-family value"Inter var", Inter, Arial, sans-serif
Border radiusWhether or not to add a border radius around the widget.booleanYes
Box shadowWhether or not to add a colored box shadow around the widget.booleanNo

Widget FAQ​

Why an iFrame?​

Using an iFrame keeps the styling and structure of the widgets independent of the rest of your page. It's the typical way of integrating outside content into a page.

Will other third-party tools still work within the iFrame?​

Yes. We work with you to identify your third-party tools and load the appropriate scripts within the iFrame.

Can I use my own custom widgets?​

Yes. Simply paste the Organic product or offer link you'd like to use into your existing product card or other widget(s) to take advantage of Organic Affiliate's centralized link management and reporting features.

Additionally, your engineers can use the Organic Affiliate GraphQL API to pull product data in order to build completely custom experiences. For more information on this API, please contact Organic support.