Goaffpro affiliate web components

This library loads the necessary components to display affiliate information on your storefront or any other HTML page

Usage

1. Load the library via CDN. Add the following script tag just above </body> OR </head> tag in your theme

<script type="module" src="https://unpkg.com/@goaffpro/affiliate-web-components@latest/dist/affiliate-web-components/affiliate-web-components.esm.js"></script> 

2. Generate a public token to be used in the webcomponents. To generate the token, open Goaffpro merchant admin panel -> Settings page -> Advanced Settings tab -> Access tokens section. Click NEW API KEY to generate X-GOAFFPRO-PUBLIC-TOKEN. You will need to use the generated token in the next step

3. Now you are ready to use the webcomponents. See below

Available Components

---

Affiliate Info component

This component allows you to display affiliate related information in your store when the customer uses the affiliate's link to enter the store.

<affiliate-info token="x-goaffpro-public-token" text="You are shopping with {{name}}"></affiliate-info>

Available attributes

Attribute	Description	Mandatory
token	The x-goaffpro-public-token generated in Step 2 above	YES
text	The text to display on the page. A number of custom tags are available to customize the text. See list of available tags below	YES
class	The CSS class to apply on text

Tag	Description	Example
name	The name of the affiliate	{{name}}
first_name	The name of the affiliate	{{first_name}}
last_name	The name of the affiliate	{{last_name}}
company_name	The name of the affiliate	{{company_name}}
coupon	The coupon code given to the affiliate	{{coupon}}

Note: For Shopify's liquid files, please wrap the component in raw tag to ensure custom tags are preserved in generated HTML. eg.

{% raw %}
<affiliate-info token="x-goaffpro-public-token" text="You are shopping with {{name}}"></affiliate-info>
{% endraw %}

---

Affiliate selector component

This component allows you to display a list of affiliates for your customer to choose from when placing an order.

<affiliate-selector token="x-goaffpro-public-token"></affiliate-selector>

Available attributes

Attribute	Description	Mandatory	Default
token	The x-goaffpro-public-token generated in Step 2 above	YES
label	The affiliate property to show in the selector. See list of available properties below	NO	name
fallback	The fallback property to show in case the label is not set by the affiliate	NO	name
group_id	The group whose members are visible in the selector. Group ID is visible in the admin panel	No
class	The CSS class to apply on the select element	NO

Available properties

Property	Description
name	The name of the affiliate
first_name	The first name of the affiliate
last_name	The last name of the affiliate
company_name	The company name of the affiliate

---

Affiliate photo component

This component allows you to display profile photo of the affiliate as an img tag

<affiliate-photo token="x-goaffpro-public-token"></affiliate-photo>

Available attributes

Attribute	Description	Mandatory	Example
token	The x-goaffpro-public-token generated in Step 2 above	YES
alt	The affiliate property to show in the selector. See list of available properties below	NO	Affiliate's photo
fallback_src	The affiliate property to show in the selector. See list of available properties below	NO	https://via.placeholder.com/100x100
width	Set width of the image	NO	100
height	Set height of the image	No	100
class	The CSS class to apply on the select element	NO
cover	Shorthand to set css object-fit property to cover	NO	Yes
rounded	Shorthand to set image as rounded	NO	Yes
borderRadius	Shorthand to set border radius of the image	NO	8