Overriding Components
Component Custom Renderers
The SDK allows advanced users to replace the render function of some components with their own custom solution.
This is achieved through the setCustomRenderer
method. It accepts a configuration object with the following parameters:
Key | Type | Description |
---|---|---|
section | String - required | The key of the section that needs to be replaced (see the list of overridable sections below). |
componentId | String - required | The ID of the experience component which the section belongs to |
render | Function | The custom render function. It accepts predefined parameters (see the list of overridable sections below) and should return HTML as a string. |
middleware | Function | The custom middleware function to modify predefined parameters (see the list of overridable sections below) |
shouldOverride | Function | A function that accepts the same parameters as render and must return a Boolean. If it returns true the custom render will be displayed. |
onDidRender | Function | A function that accepts the same parameters as render and will be called after the override function ran. |
className | String | Optional CSS classes for the custom renderer container. |
style | Object | Custom CSS styles that will be applied to the renderer container. |
Overridable components
Questions
Product result
Content which is displayed on Product results (Show a product, Show preview of a web page, Show a product from conversion unit library).
Key
QuestionsProduct
Parameters
Key | Description |
---|---|
result | Object, information about result |
metadata | Object, information from Product fields, Conversion unit or unfurl from a link |
FlexGrid Gallery
Thumbnail Title
The title/caption displayed at the bottom of each thumbnail in the grid view.
Key
FlexGridTileMediaInfo
Parameters
Key | Description |
---|---|
tile | Object, information about tile |
product | Object, all available information about UGC item |
defaultText | Text that is displayed in tile info by default (if user info is not available it will be caption or translated caption if this feature is used) |
Note: see more info in Complex parameters definition
section below.
Text-only Media in tiles
Representation of text-only content in tiles.
Key
FlexGridTileMediaTextOnly
Parameters
Key | Description |
---|---|
tile | Object, information about tile |
product | Object, all available information about UGC item |
defaultText | Text of caption (it's translated if this feature is used) |
Note: see more info in Complex parameters definition
section below.
Content Details
The Media info, displayed on the right hand side in the details modal view (right under the media or conversion units in mobile version).
Key
FlexGridDetailsMediaInfo
Parameters
Key | Description |
---|---|
product | Object, all available information about UGC item |
defaultCaption | Text of caption (it's translated if this feature is used) |
Note: see more info in Complex parameters definition
section below.
Expanded Image Media
The image media, displayed on the left hand side in the details modal view (on the top in mobile version).
Key
FlexGridDetailsMediaImage
Parameters
Key | Description |
---|---|
product | Object, all available information about UGC item. |
alt | String, pre-calculated alt text. |
src | String, direct URL to the the image in its original size. |
Note: see more info in Complex parameters definition
section below.
Expanded Video Media
The video media, displayed on the left hand side in the details modal view (on the top in mobile version).
Key
FlexGridDetailsMediaVideo
Parameters
Key | Description |
---|---|
product | Object, all available information about UGC item. |
alt | String, pre-calculated alt text. |
src | String, direct URL to the the original video. |
Note: see more info in Complex parameters definition
section below.
Expanded Text-only Media
The text-only media, displayed on the left hand side in the details modal view (on the top in mobile version).
Key
FlexGridDetailsMediaTextOnly
Parameters
Key | Description |
---|---|
product | Object, all available information about UGC item |
defaultText | Text of caption (it's translated if this feature is used) |
Note: see more info in Complex parameters definition
section below.
Expanded Media (Any)
Any media, displayed on the left hand side in the details modal view (on the top in mobile version).
Note: this allows to render any media on left-hand side from scratch, but may require more efforts - in a lot of cases it should be easier to use FlexGridDetailsMediaImage
, FlexGridDetailsMediaVideo
, FlexGridDetailsMediaTextOnly
.
Key
FlexGridDetailsMediaAny
Parameters
Key | Description |
---|---|
product | Object, all available information about UGC item. |
Note: see more info in Complex parameters definition
section below.
Custom Text Builders
The SDK allows advanced users to override text building of some components with their own custom solution. This approach allows to avoid full overriding of component rendering (which can be hard), but just make some corrections in text.
This is achieved through the setCustomTextBuilder
method. It accepts a configuration object with the following parameters:
Key | Type | Description |
---|---|---|
section | String - required | The key of the section that needs to be replaced (see the list of overridable sections below). |
componentId | String - required | The ID of the experience component which the section belongs to |
build | Function - required | The custom text building function. It accepts predefined parameters (see the list of overridable sections below) and should return a string. |
shouldOverride | Function | A function that accepts the same parameters as build and must return a Boolean. If it returns true the custom text will be displayed. |
Overridable text components
FlexGrid Gallery
Text-only Media in tiles
Text which is displayed on text-only content tiles.
Key
FlexGridTileMediaTextOnly
Parameters
Key | Description |
---|---|
tile | Object, information about tile |
product | Object, all available information about UGC item |
defaultText | Text of caption (it's translated if this feature is used) |
Note: see more info in Complex parameters definition
section below.
Text-only Media in details view
Controls building of a Text only UGC text in the details view.
Key
FlexGridDetailsMediaTextOnly
Parameters
Key | Description |
---|---|
product | Object, all available information about UGC item |
defaultText | Text of caption (it's translated if this feature is used) |
Note: see more info in Complex parameters definition
section below.
Conversion units in details view
The conversion units, displayed on the right hand side in the details modal view.
Key
ConversionUnitGallery
Parameters
Key | Description |
---|---|
conversionUnits | Array of conversion-unit objects |
Note: see more info in Complex parameters definition
section below.
Middleware
Optional middleware function may be applied with or without render
parameter.
Provides access to parameters which will be passed to default or custom render
function for their modification.
Examples
Assuming you want to replace the caption from a FlexGrid tile to display the Author's name in capital letters, but only if the user comes from Instagram.
Here's what would go in the experience's custom JS section:
window.wyng['_WYNG_ID_'].setCustomRenderer({
section: `FlexGridTileMediaInfo`,
componentId: '[YOUR_COMPONENT_ID]',
shouldOverride: params => params.product.content.social_platform === 'instagram',
render: params => `<p>Instagram Media from @${params.product.content.author.profile.username.toUpperCase()}.</p>`,
})
Assuming you want to replace domain URL for each conversion unit in detailed view.
Here's what would go in the experience's custom JS section:
window.wyng['_WYNG_ID_'].setCustomRenderer({
section: `ConversionUnitGallery`,
componentId: '[YOUR_COMPONENT_ID]',
middleware: (params) => {
const newUnits = params.conversionUnits.map(u => ({
...u,
click_through_url: u.click_through_url.replace('conversion-unit.domain', 'new.domain'),
}));
return { conversionUnits: newUnits }
}
})
Assuming you want to replace domain URL for each conversion unit and their render.
Here's what would go in the experience's custom JS section:
window.wyng['_WYNG_ID_'].setCustomRenderer({
section: `ConversionUnitGallery`,
componentId: '[YOUR_COMPONENT_ID]',
render: params => `<div>${params.conversionUnits.map(unit => <a href={unit.click_through_url}>{unit.name}</a>)}</div>`,
middleware: (params) => {
const newUnits = params.conversionUnits.map(u => ({
...u,
click_through_url: u.click_through_url.replace('conversion-unit.domain', 'new.domain'),
}));
return { conversionUnits: newUnits }
}
})
Assuming you want to change text in text-only media in FlexGrid tile to display all text in capital letters, but only in big tiles and if the content comes from Twitter.
Here's what would go in the experience's custom JS section:
window.wyng['_WYNG_ID_'].setCustomTextBuilder({
section: `FlexGridTileMediaTextOnly`,
componentId: '[YOUR_COMPONENT_ID]',
shouldOverride: ({ tile, product }) => product.content.social_platform === 'twitter' && tile.isBigTile,
build: ({ product }) => `${product.content.text.toUpperCase()}`,
})
Complex parameters definition
Render/Text-builder function can contain complex object parameters. Here you can find the structure definition of such objects.
Tile
This is the definition of the tile
object.
Key | Type | Description | Example |
---|---|---|---|
tileIndex | integer | 0 based position of the tile in the grid | 2 |
displayIndex | integer | 1 based position of the tile in the grid | 5 |
isBigTile | boolean | Is the current tile a big showcase tile | true |
isTopTile | boolean | is the tile in the top row | false |
isLeftTile | boolean | is the tile the first of a row (left position) | true |
Product
This is the definition of the product
object.
Key | Type | Description | Example |
---|---|---|---|
id | integer | ID of the UGC item | 7992013 |
translations | object | Available translation units for the UGC item | {} |
activate_units | array | List of activation unit objects | [] |
submission | object | Submission details if the image is UGC from a campaign | {} |
hashtag | object | Injested Hashtag Details | See below |
hashtag.social_platform | string | The platform the hashtag was ingested from | instagram |
hashtag.hashtag_text | string | The hashtag content (without the # sign) | nofilter |
featured | boolean | Indicates if this specific UGC item is a featured item | false |
approval_status | string | The approval status of the UGC item. Should be app if the content has been approved | app |
shortened_permalink | string | Permalink if it has been generated | https://perma.link/123 |
last_modified | string | ISO 8601 Timestamp of last modification | 2020-11-23T21:51:54+00:00 |
created_on | string | ISO 8601 Timestamp of creation | 2020-11-23T21:51:54+00:00 |
tags | object | UGC Tags Details | See below |
tags.hashtags | array | List of all the tags associated | ['nofilter', 'foodporn'] |
content | object | Additional content details | See below |
content.content_type | string | image or video or text | image |
content.media | object | Additional media infos | See below |
content.media.id | integer | Internal ID of the media | 1234 |
content.media.platform_data.url | string | Link to the original post/media | https://www.instagram.com/p/CX328Pth82W/ |
content.media.original_url | string | URL of the original image on Wyng servers, | https://cdn.wyng.com/i123/image.jpg |
content.media.base_url | string | URL of the folder containing the images, | https://cdn.wyng.com/i123 |
content.media.media_type | string | image or video or text | image |
content.media.social_platform | string | The platform the image was ingested from (instagram, twitter…) | instagram |
content.media.media_urls | object | Object containing links to the available image sizes | See below |
content.media.media_urls.large_image | string | Direct URL to the image in the largest format | https://cdn.wyng.com/i123/image_1.jpg |
content.media.media_urls.medium_image | string | https://cdn.wyng.com/i123/image_2.jpg | |
content.media.media_urls.small_image | string | https://cdn.wyng.com/i123/image_3.jpg | |
content.social_platform | string | The platform the image was ingested from (instagram, twitter…) | instagram |
content.author | object | Author infos | See below |
content.author.id | integer | Wyng internal ID for this author | 12312321321 |
content.author.profile | object | Author Profile infos | See below |
content.author.profile.username | string | Platform Username | beeple_crap |
content.author.profile.name | string | Display name, might be empty on some platforms | beeple |
content.author.profile.profile_link | string | Display name, might be empty on some platforms | https://www.instagram.com/beeple_crap/ |
content.author.profile.avatar | string | Link to the profile avatar | https://images.url/avatar.jpg |
content.author.platform_id | string | The ID or username of the author on the platform the content comes from | 12342141223 |
content.author.social_platform | string | The platform the image was ingested from (instagram, twitter…) | instagram |
content.permission_modified | string | ISO 8601 Timestamp of when the UGC permission was last modified | 2020-11-23T21:51:54+00:00 |
Conversion unit
This is the definition of the single conversion-unit
object.
Key | Type | Description | Example |
---|---|---|---|
id | integer | ID of the conversion unit item | 123 |
click_through_url | string | Click-trough URL | https://wyng.com |
description | string | Unit description | Marketing platform |
description | string | Unit description | Marketing platform |
external_id | string | ID of the conversion unit item in external system | abcdefg12345 |
name | string | Unit name | Wyng |
image_url | string | Unit image URL | https://link.to/image.png |
Assuming you want to replace product result view.
Here's what would go in the experience's custom JS section:
window.wyng['_WYNG_ID_'].setCustomRenderer({
section: `QuestionsProduct`,
componentId: '[YOUR_COMPONENT_ID]',
render: params => `<a href="${params.metadata.url}"><img src="${params.metadata.image}" /></a>`,
})