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>`,
})