Embed stories using code snippet

To embed Veedmo stories using manual JavaScript configuration you need to add, to your website, specially prepared JavaScript code snippet and manually set all configuration options in it.

Important

In some cases, Veedmo stories might be blocked by CORS mechanism and do not load RSS feed - such situation can happen when RSS feed (set in rss_url param) is hosted in different domain (e.g. domain-1.com) than Veedmo stories were loaded (e.g. domain-2.com).

To resolve this problem, and make Veedmo stories to load RSS feed correctly, the server hosting RSS feed (e.g. domain-1.com), should add domain on which Veedmo stories are loaded (e.g. domain-2.com) to CORS whitelist (property Access-Control-Allow-Origin).

JavaScript code snippet (sample)

Specially prepared JavaScript code snippet (mentioned below) can be added to website in various ways (e.g. via 3rd party frameworks, Google Tag Manager, ...); we recommend to inject it before closing </body> tag as it requires website's DOM (Document Object Model) to be loaded, so player could be injected in given (in configuration) query selector on page.

(function veedmoSlider(config) {
  (function veedmoSliderApply() {
    var el = document.querySelector(config.query_selector);
    if (el) {
      var script = document.createElement("script");
      script.src = "https://cdn.veedmo-static.com/cdn/slideshow/v1/current.js";
      document.body ? document.body.appendChild(script) : document.head.appendChild(script);
      script.addEventListener("load", function() {
        window.veedmoSlider(config);
      });
    } else {
      setTimeout(veedmoSliderApply, 100);
    }
  })();
})({
  "partner_id": UNIQUE_NUMERIC_PARTNER_ID,
  "rss_url": "https://www.theverge.com/rss/index.xml",
  "max_slides_amount": 7,
  "query_selector": "#element",
  "slide_duration": 4,
  "theme_color": "#2962ff",
  "max_number_of_injected_ads": 0,
  "video_player_config": {
    "tag_url_desktop": "",
    "tag_url_mobile": ""
  }
});

Configuration parameters

Below there is a list of supported configuration parameters. * - mandatory parameter.

Param	Description
partner_id *	Unique numeric ID of Veedmo partner account. Contact us to obtain your partner account and partner_id.
query_selector *	JavaScript querySelector (e.g. id, class name) of the page element to inject stories into. IMPORTANT: do not use veedmo as your query selector name as it is system reserved name.
rss_url *	URL of RSS feed to generate stories from.
slide_duration	Time duration of showing single slide (in seconds). If not defined, 4 seconds will be used.
max_slides_amount	Max. number of slides to be shown in stories. If not defined, 6 will be used.
position	Set slider position on page (in page content, floating, in page content + floating). Possible values: type param: 1 - in page content 2 - floating (floating stories corner and distance set by corner and vertical_margin and horizontal_margin params) 3 - in page content + floating (floating stories corner and distance set by corner and vertical_margin and horizontal_margin params) corner param: bl - bottom left corner of the screen br - bottom right corner of the screen tl - top left corner of the screen tr - top right corner of the screen vertical_margin - floating stories distance from top / bottom (depending on set corner param value) edge of the screen, in pixels (px) or percent (%). Required only if position is set to 2 or 3 horizontal_margin - floating stories distance from left / right (depending on set corner param value) edge of the screen, in pixels (px) or percent (%). Required only if position is set to 2 or 3 max_width - floating stories max. width,in pixels (px) or percent (%). Required only if position is set to 2 or 3 min_width - floating stories min. width,in pixels (px) or percent (%). Required only if position is set to 2 or 3 Example: "position": {   "type": 3,   "config": {     "corner": "br",     "vertical_margin": "20px",     "horizontal_margin": "20px",     "max_width": "20%",     "min_width": "300px",   }, }, If not defined, stories will appear in page content (without floating mode).
theme_color	Stories theme color, used on: progress bars, title bar, hover on controls - HEX RGB (e.g. FF0000) or text value (e.g. red).
show_items_without_img	Possible values: 0 - do not show, in stories, items from RSS feed which do not have image 1 - show, in stories, items from RSS feed which do not have image If not defined, 0 (do not show items without image) will be used.
open_links_in_new_tab	Possible values: 0 - open slides' links in the same tab (as stories) 1 - open slides' links in the new tab If not defined, 1 (open slides' links in the new tab) will be used.
enable_utm_tracking_params	Possible values: 0 - do not append Veedmo UTM params to links 1 - append Veedmo UTM params to links (utm_source=veedmo-stories, utm_medium=veedmo-stories, utm_campaign=veedmo-stories) If not defined, 1 (append Veedmo UTM params to links) will be used.
max_number_of_injected_ads	Max. number of ads injected in stories. Cannot be greater than max_slides_amount. Ad is injected after slide.
video_player_config	Config of video player, handling ads, shown after slides. It is an object containing two elements, tag_url_desktop and tag_url_mobile. tag_url_desktop - URL(s) of ad tag(s), or pure XML(s) content of ad(s), to display on desktop devices. If empty, no ad(s) will be displayed on mobile devices. tag_url_mobile - URL(s) of ad tag(s), or pure XML(s) content of ad(s), to display on mobile devices. If empty, no ad(s) will be displayed on mobile devices. tag_url_desktop and tag_url_mobile handle single URL, or XML content of ad tag, or multiple URLs / XMLs content, via waterfall mechanism. To set up waterfall mechanism, pass array of objects, where each object contains ad tag URL / XML content, and a type (acceptable types are: vast - for VAST / VMAP ad tag URL(s), vpaid - for VPAID ad tag URL(s), vastxml - for ad XML(s) content). Example: "tag_url_desktop": [   {     url: "AD_TAG_1 URL",     type: "vast"   },   {     url: "AD_TAG_2 URL",     type: "vpaid"   },   {     url: "AD_TAG_3 pure XML content",     type: "vastxml"   }, ], "tag_url_mobile": [   {     url: "AD_TAG_1 URL",     type: "vast"   },   {     url: "AD_TAG_2 URL",     type: "vpaid"   },   {     url: "AD_TAG_3 pure XML content",     type: "vastxml"   }, ], Waterfall mechanism waits max. 5sec for each ad tag request to return response. If no ad, empty ad or ad error is returned, mechanism jumps to next ad tag, in set order, and performs request.
branding	Customizable stories branding. Branding appears as 32px height (proportional width) clickable image in top right corner of stories. corner branding is an object, with 3 configurable parameters: text - text which will appear (on hover of corner image, or on bottom bar) link - URL which will be opened on click on image set in image image - URL of image (formats: *.jpg, *.png, *.svg) which will appear in corner If not defined, only Powered by Veedmo will appear in top right corner of stories.

Live example

Below there is an the example showing how Veedmo stories can be embedded on page using manual JavaScript configuration. Click on "Result" tab to see the result.