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"
}