RevFlicker

<div id="rev-flicker"></div>

<script src="https://labs-cdn.revcontent.com/build/revflicker.min.js"></script>

<script>
new RevFlicker({
id: 'rev-flicker',
api_key: 'api_key',
pub_id: 000,
widget_id: 000,
domain: 'your_site.com'
});
</script>

api_key: 'hf3948hf9384hf938hf3hf0'

domain: 'example.com'

pub_id: 1234

widget_id: 123456

id (required if element is not used)

Matches a div id on the page. For example to target <div id="my-flicker"></div> you'd use:

id: 'my-flicker'

 

element (required if an "id" is not used)

A jQuery wrapped element, will be used instead of "id" option

element: false

 

ad_border

Set to "true" to display a border around each ad. Defaults to "false"

ad_border: true

 

square_border

Set to "true" to display square borders. Defaults to "false"

square_border: false

 

ad_overlay

Key value ad overlay config object where the key is the content type and the value is the icon to use. For example to use the video_rectangle icon for video content use video: 'video_rectangle'. The icon will be appended to the .rev-ad element

ad_overlay: false

 

ad_overlay_position

The position of the ad overlay icon. Available options include center, top_left, top_right, bottom_right and bottom_left

ad_overlay_position: 'bottom_right'

 

css

Additional custom CSS to append

css: ''

 

devices

Devices the widget will appear on. Options include phone, tablet and desktop

devices: [
    'phone', 
    'tablet', 
    'desktop'
]

 

dots

Set to "true" to show pagination dots, or "false" to hide them

dots: false

 

header

The heading text displayed above the widget. Wrapped inside <h2 class="rev-header">

header: 'Trending Now'

 

headline_size

Number of lines that the headline can take up. Ignored if max_headline is set to "true"

headline_size: 2

 

hide_provider

Display the content's provider name

hide_provider: false

 

image_ratio

Ratio of the images. Available options include wide_rectangle, rectangle, square

image_ratio: (revDetect.mobile() ? 'wide_rectangle' : 'rectangle')

 

hide_header

Set to "true" if you'd like to hide the widget's heading

hide_header: true

 

image_overlay

Key value image overlay object config where the key is the content type and the value is the icon to use. For example to use the video_rectangle icon for video content use video: 'video_rectangle'. The icon will be appended to the .rev-image element

image_overlay: false

 

image_overlay_position

The position of the image overlay icon. Available options include center, top_left, top_right, bottom_right and bottom_left

image_overlay_position: 'center'

 

internal

Number of internal ads to display. sponsored option is ignored and only internal ads are shown

internal: false

 

max_headline

Show entire headlines for all content, with no ellipsis. This option overrides headline_size

max_headline: false

 

multipliers

Adjust sizing relative to the ad size. Can be negative values

{
    line_height: 0,
    font_size: 0,
    margin: 0,
    padding: 0
}

 

next_effect

Allows the next/halved ad to have a slight transition

next_effect: true

 

next_width

A fixed number of pixels for the next/halved ad. If set will override next_width_percentage

next_width: false

 

next_width_percentage

By default the next/halved ad will be 20% of the regular ad width. All ads will be resized after setting the next/halved ad width

next_width_percentage: 5

 

overlay_icons

Pass in custom icons where the key is the icon name and the value is the svg icon. For example {article_square: '<svg></svg>'}. Default icons include video_rectangle, video_square, video_circle1, video_circle2 and video_triangle

overlay_icons: false

 

per_row

Object or single value. Pass a single number to be used for every breakpoint or provide a value for each breakpoint

per_row: {
    xxs: 1,
    xs: 1,
    sm: 3,
    md: 4,
    lg: 5,
    xl: 6,
    xxl: 7
}

 

query_params

Key value object for query params to send to server. Can be multidimensional

query_params: false

The example below demonstrates how to pass subid values. The resulting query parameters will be ?revsub[key]=value

query_params: {
    revsub: {
        key: 'value'
    }
}

 

rev_position

Position of the disclosure text if hide_disclosure is not enabled. Options include: 'bottom_right', 'top_right', 'bottom_left'

rev_position: (revDetect.mobile() ? 'bottom_right' : 'top_right')

 

show_arrows

Show paging arrows for mobile devices or desktop

{
    mobile: false,
    desktop: true
}

 

size

Set fixed size for various measurements.

{
    margin: false,
    image_height: false,
    headline_line_height: false,
    headline_margin_top: false,
    provider_line_height: false,
    provider_margin_top: false,
    provider_margin_bottom: false,
    inner_margin: false
}

 

sponsored

Number of sponsored ads to show. Internal option overrides this value to only show internal.

sponsored: 10

 

text_overlay

Content headline text will overlay the image rather than be position below it if set to "true". Defaults to "false"

text_overlay: false

 

text_top

Content headline text will be positioned above the image if set to "true". Defaults to "false"

text_top: false

 

text_right

Content headline text will be positioned to the right of the image if set to "true". Defaults to "false"

text_right: false

 

text_right_height

Value in pixels of the ad image if text_right is enabled

text_right_height: 100

 

url

Use an alternate API url

url: 'https://trends.revcontent.com/api/v1/'

 

user_agent

Pass user_agent param to API

user_agent: false

 

user_ip

Pass user_ip to API

user_ip: false

 

arrow_style

Next/Previous arrow style. Options are "circle" or "square"

arrow_style: 'circle'

 

arrow_opacity

Next/Previous arrow opacity. Can be 0.1 - 1

arrow_style: 1

 

trending

Set to "true" to display a trending number count. Defaults to "false"

trending: false

 

window_width_devices

Devices to enable the full viewport/window width feature where the widget will stretch the entire viewport width

window_width_devices: [
    'phone', 'tablet'
]