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