Widgets

This section describes details about options and implementation of widgets.

The configurator of Widgets: https://app.linkexchange.io/direct/configurator

linkexchange-link

The source: https://github.com/Userfeeds/Apps/tree/master/widgets/linkexchange-link

The latest version is available at: https://cdn.jsdelivr.net/npm/@linkexchange/widgets@latest

Common parameters:

asset

• string
• required
• values: ethereum | rinkeby | ropsten | kovan | ethereum:erc20TokenContractAddress

specifies the asset being used in the widget

recipient-address

• string
• required
• values: recipientAddress

specifies the address to which the asset will be sent on each transaction

whitelist

• string
• optional
• values: whitelistAddress

specifies the address which will be used as a whitelist for links. If specified all the links shown all page will need to be first accepted by the whitelist address

algorithm

• string
• optional
• default: ads
• values: Algorithms

name of the algorithm to use for links filtering/sorting

size

• string
• optional
• default: rectangle
• values: rectangle, leaderboard

specifies the size of widget

widget-title

• string
• required

specifies the title of widget shown in details

description

• string
• required

specifies the description of widget shown in details

contact-method

• string
• required

specifies a contact method shown in widget details

slots

• number
• optional
• default: 10

specifies a number of links shown in widget

timeslot

• number
• optional
• default: 5

seconds each link fitting into the slots will be shown in widget

translations

• string
• optional

name of the object in global window object which contains mapping of translations

translations-url

• string
• optional

url to json file which contains mapping of translations

open-details

• “modal” | “tab”
• optional
• default: “modal”
• since 0.0.158

defines how widget details will be opened

Sample usage

<linkexchange-link
  algorithm="links"
  slots=2
  timeslot=7
  size="leaderboard"
  asset="rinkeby:0xd5cfec7...eec72aced241e5e"
  recipient-address="0xcD335186...41909D3448BC60f0665"
  whitelist="0xcD335186...5215215215abcdabcdabcd"
  widget-title="First Widget"
  description="I accept only links that are about science and technology. I like trains"
  impression="N/A"
  contact-method="[email protected]"
>
</linkexchange-link>
<script src="https://cdn.jsdelivr.net/npm/@linkexchange/widgets@latest"></script>

<linkexchange-link
  algorithm="links"
  slots=10
  size="leaderboard"
  asset="ethereum"
  recipient-address="0xcD335186...41909D3448BC60f0665"
  widget-title="Real widget"
  description="True widget"
  impression="50k - 100k"
  contact-method="[email protected]"
>
</linkexchange-link>
<script src="https://cdn.jsdelivr.net/npm/@linkexchange/widgets@latest"></script>

Custom validations

The widget allows you to register and unregister your own custom validators during runtime. In order to do that you can use addValidation and removeValidation methods defined on linkexchange-link html element.

addValidation

addValidation(
  formName: string,
  inputName: string = 'form',
  callback: (fieldName: string, value: any) => Promise<string | null> | string | null,
) : void

addValidation is a method that registers a validator that returns a string when validation did not pass. It can also return a Promise that resolves with string when error occurs.

Sample usage:

const widget = document.querySelector("linkexchange-link");
widget.addValidation("add-link", "title", (fieldName, value) => {
  return value === "Inappropriate" ? "Title can't be appropriate" : null;
});

removeValidation

removeValidation(
  formName: string,
  inputName: string = 'form',
  callback: (fieldName: string, value: any) => Promise<string | null> | string | null,
) : void

removeValidation is a method that unregisters a validator.

Sample usage:

const widget = document.querySelector("linkexchange-link");
const validator = (fieldName, value) => {
  return value === "Inappropriate" ? "Title can't be appropriate" : null;
};
widget.addValidation("add-link", "title", validator);
widget.removeValidation("add-link", "title", validator);

Current forms

Currently supported forms with fields withcustom validations are:

• add-link
  • title
  • summary
  • target
  • value

Translations

Translations can be provided using transactions or transactions-url attribute of the widget. When using remote file with translations widget rendering is defered.

Sample usage:

<script>
  window.my-custom-translations = {
    'banner.sponsoredWith': 'Gesponsert mit',
    'banner.noLinks': 'Keine Links verfügbar',
    'menu.buyLink': 'Kaufe einen Link',
  };
</script>
<linkexchange-link
  transactions="my-custom-translations"
  size="leaderboard"
  type="text"
  asset="ropsten"
  ...
></linkexchange-link>

Currently supported default transactions:

{
  "list.slots.title": "Slots",
  "list.approved.title": "Approved",
  "list.algorithm.title": "Algorithm",
  "widgetSpecification.title": "Widget Specification",
  "userfeedsAddressInfo.title": "Userfeed Address",
  "list.header.no": "NO",
  "list.header.probability": "Probability",
  "list.header.content": "Content",
  "list.header.score": "Current score",
  "list.header.bids": "Bids",
  "widgetSummary.openInNewWindow": "New Window",
  "widgetSummary.addLink": "Create new link",
  "widgetSummary.declaredImpression": "Declared impressions",
  "widgetSummary.sourceDomain": "Source Domain",
  "widgetSummary.contact": "Contact",
  "widgetSummary.validTill": "Valid till",
  "sideMenu.slots": "Slots",
  "sideMenu.approved": "Approved",
  "sideMenu.algorithm": "Algorithm",
  "sideMenu.specification": "Specification",
  "sideMenu.userfeed": "Userfeed",
  "menu.buyLink": "Buy a Link",
  "banner.sponsoredWith": "Sponsored With",
  "banner.noLinks": "No links available"
}