Skip to main content

Widgets

caution

This documentation is in progress.

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.

What does the widget's div code look like?

It looks something like this:

<div data-organic-affiliate-integration="product-card"
data-organic-affiliate-integration-options="displayDescription=false,displayImage=true,displayPrice=true,description="
data-organic-affiliate-integration-banner-text=""
data-organic-affiliate-product-guid="43f0a4e0-fed6-48b4-881a-12ff43f98c60"
></div>

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.