Skip to main content

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:

KeyTypeDescription
sectionString - requiredThe key of the section that needs to be replaced (see the list of overridable sections below).
componentIdString - requiredThe ID of the experience component which the section belongs to
renderFunctionThe custom render function. It accepts predefined parameters (see the list of overridable sections below) and should return HTML as a string.
middlewareFunctionThe custom middleware function to modify predefined parameters (see the list of overridable sections below)
shouldOverrideFunctionA function that accepts the same parameters as render and must return a Boolean. If it returns true the custom render will be displayed.
onDidRenderFunctionA function that accepts the same parameters as render and will be called after the override function ran.
classNameStringOptional CSS classes for the custom renderer container.
styleObjectCustom CSS styles that will be applied to the renderer container.

Overridable components

Thumbnail Title

The title/caption displayed at the bottom of each thumbnail in the grid view.

Key

FlexGridTileMediaInfo

Parameters
KeyDescription
tileObject, information about tile
productObject, all available information about UGC item
defaultTextText 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
KeyDescription
tileObject, information about tile
productObject, all available information about UGC item
defaultTextText 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
KeyDescription
productObject, all available information about UGC item
defaultCaptionText 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
KeyDescription
productObject, all available information about UGC item.
altString, pre-calculated alt text.
srcString, 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
KeyDescription
productObject, all available information about UGC item.
altString, pre-calculated alt text.
srcString, 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
KeyDescription
productObject, all available information about UGC item
defaultTextText 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
KeyDescription
productObject, 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:

KeyTypeDescription
sectionString - requiredThe key of the section that needs to be replaced (see the list of overridable sections below).
componentIdString - requiredThe ID of the experience component which the section belongs to
buildFunction - requiredThe custom text building function. It accepts predefined parameters (see the list of overridable sections below) and should return a string.
shouldOverrideFunctionA 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

Text-only Media in tiles

Text which is displayed on text-only content tiles.

Key

FlexGridTileMediaTextOnly

Parameters
KeyDescription
tileObject, information about tile
productObject, all available information about UGC item
defaultTextText 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
KeyDescription
productObject, all available information about UGC item
defaultTextText 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
KeyDescription
conversionUnitsArray 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.

KeyTypeDescriptionExample
tileIndexinteger0 based position of the tile in the grid2
displayIndexinteger1 based position of the tile in the grid5
isBigTilebooleanIs the current tile a big showcase tiletrue
isTopTilebooleanis the tile in the top rowfalse
isLeftTilebooleanis the tile the first of a row (left position)true

Product

This is the definition of the product object.

KeyTypeDescriptionExample
idintegerID of the UGC item7992013
translationsobjectAvailable translation units for the UGC item{}
activate_unitsarrayList of activation unit objects[]
submissionobjectSubmission details if the image is UGC from a campaign{}
hashtagobjectInjested Hashtag DetailsSee below
hashtag.social_platformstringThe platform the hashtag was ingested frominstagram
hashtag.hashtag_textstringThe hashtag content (without the # sign)nofilter
featuredbooleanIndicates if this specific UGC item is a featured itemfalse
approval_statusstringThe approval status of the UGC item. Should be app if the content has been approvedapp
shortened_permalinkstringPermalink if it has been generatedhttps://perma.link/123
last_modifiedstringISO 8601 Timestamp of last modification2020-11-23T21:51:54+00:00
created_onstringISO 8601 Timestamp of creation2020-11-23T21:51:54+00:00
tagsobjectUGC Tags DetailsSee below
tags.hashtagsarrayList of all the tags associated['nofilter', 'foodporn']
contentobjectAdditional content detailsSee below
content.content_typestringimage or video or textimage
content.mediaobjectAdditional media infosSee below
content.media.idintegerInternal ID of the media1234
content.media.platform_data.urlstringLink to the original post/mediahttps://www.instagram.com/p/CX328Pth82W/
content.media.original_urlstringURL of the original image on Wyng servers,https://cdn.wyng.com/i123/image.jpg
content.media.base_urlstringURL of the folder containing the images,https://cdn.wyng.com/i123
content.media.media_typestringimage or video or textimage
content.media.social_platformstringThe platform the image was ingested from (instagram, twitter…)instagram
content.media.media_urlsobjectObject containing links to the available image sizesSee below
content.media.media_urls.large_imagestringDirect URL to the image in the largest formathttps://cdn.wyng.com/i123/image_1.jpg
content.media.media_urls.medium_imagestringhttps://cdn.wyng.com/i123/image_2.jpg
content.media.media_urls.small_imagestringhttps://cdn.wyng.com/i123/image_3.jpg
content.social_platformstringThe platform the image was ingested from (instagram, twitter…)instagram
content.authorobjectAuthor infosSee below
content.author.idintegerWyng internal ID for this author12312321321
content.author.profileobjectAuthor Profile infosSee below
content.author.profile.usernamestringPlatform Usernamebeeple_crap
content.author.profile.namestringDisplay name, might be empty on some platformsbeeple
content.author.profile.profile_linkstringDisplay name, might be empty on some platformshttps://www.instagram.com/beeple_crap/
content.author.profile.avatarstringLink to the profile avatarhttps://images.url/avatar.jpg
content.author.platform_idstringThe ID or username of the author on the platform the content comes from12342141223
content.author.social_platformstringThe platform the image was ingested from (instagram, twitter…)instagram
content.permission_modifiedstringISO 8601 Timestamp of when the UGC permission was last modified2020-11-23T21:51:54+00:00

Conversion unit

This is the definition of the single conversion-unit object.

KeyTypeDescriptionExample
idintegerID of the conversion unit item123
click_through_urlstringClick-trough URLhttps://wyng.com
descriptionstringUnit descriptionMarketing platform
descriptionstringUnit descriptionMarketing platform
external_idstringID of the conversion unit item in external systemabcdefg12345
namestringUnit nameWyng
image_urlstringUnit image URLhttps://link.to/image.png