Component APIs

`gwd-360gallery`

A gallery object that shows an object rotating.

Properties

Name	Description
`images:string`	A comma-separated string of image paths used in the gallery.
`autoplay:boolean`	The gallery should automatically play through the images in the gallery after the gallery loads.
`wrap:boolean`	The gallery should allow the user to swipe around from the first frame to the last, instead of stopping at the ends.

Events

Name	Description
`firstinteraction`	Sent when the user interacts with the gallery for the first time.
`allframesviewed`	Sent when all frames of the gallery are shown at least once.
`allframesloaded`	Sent when all frames of the gallery are loaded.
`frameshown`	Sent when a new frame is shown.
`frameactivated`	Sent when a new frame has started to be activated, even if it's not yet visible.
`frametap`	Sent when the user taps on a frame.

Methods

Name	Description
`goToFrame(frame:number, opt_animate:string, opt_direction:string)`	Animate to the specified frame.
`rotateOnce(opt_duration:number, opt_direction:string)`	Rotate the object in the gallery once.
`goForwards()`	Moves gallery forwards by one frame.
`goBackwards()`	Moves gallery backwards by one frame.

Add to Calendar

`gwd-addtocalendar`

Adds an event to a calendar.

Properties

Name	Description
`event-title:string`	The event name as it will be seen in the user's calendar.
`start-date:string`	The date the event begins.
`start-time:string`	The time the event starts (in 24-hour time).
`end-date:string`	The date the event ends.
`end-time:string`	The time the event ends (in 24-hour time).
`timezone:string`	The time zone for the event. When this is set, the time will be adjusted correctly for the user when the user is in another time zone.
`location:string`	The location of the event.
`description:string`	The description of the event.
`icalendar:boolean`	Whether an iCalendar file should be used or not.
`google:boolean`	Whether a Google Calendar should be used or not.
`windows-live:boolean`	Whether a Windows Live Calendar should be used or not.
`yahoo:boolean`	Whether a Yahoo! Calendar should be used or not.
`bg-color:string`	Hexadecimal value for the background color of the dropdown.
`font-color:string`	Hexadecimal value for the font color of the dropdown.
`font-family:string`	Name for the font of the dropdown.
`font-size:string`	Size for the font of the dropdown.
`font-weight:string`	Font weight for the font of the dropdown.
`highlight-color:string`	Hexadecimal value for the highlight color of the dropdown.

Audio

`gwd-audio`

A component that wraps an HTMLAudioElement.

Properties

Name	Description
`autoplay:boolean`	Whether the audio should autoplay when loaded.
`loop:boolean`	Whether the audio should loop when completed.
`muted:boolean`	Whether the audio should start muted.
`controls:boolean`	Whether the default native player controls are enabled.
`sources:string`	A comma-separated string of audio sources in different formats.

Events

Name	Description
`play`	Sent when playback of the media starts after a prior pause event.
`pause`	Sent when playback is paused.
`playing`	Sent when the media begins to play (for the first time, after having been paused, or after ending and then restarting).
`ended`	Sent when playback completes.
`volumechange`	Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
`seeked`	Sent when a seek operation completes.
`waiting`	Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

Methods

Name	Description
`mute()`	Toggle to mute/unmute the audio.
`pause()`	Pauses the audio.
`play()`	Plays the audio.
`replay()`	Replays the audio.
`seek(time:number)`	Jumps to the specified time in the audio.

Carousel Gallery

`gwd-carouselgallery`

A gallery object that shows its frames on a carousel-style layout.

Properties

Name	Description
`images:string`	A comma-separated string of image paths used in the gallery.
`groups:string`	A comma-separated string of group IDs.
`transition-duration:number`	Gallery animation speed in milliseconds.
`start-frame:number`	The number of the image you want to display initially.
`autoplay:boolean`	Whether to autoplay the frames once or not.
`has-navigation:boolean`	Whether to automatically include gallery navigation controls.
`navigation-thumbnails:boolean`	Whether thumbnails should be used for navigation instead of dots.
`navigation-highlight:color`	A CSS color code used to highlight the active frame in navigation.
`scaling:string`	How image content will be scaled to fit its frame.
`frame-width:number`	The width of one content panel.
`frame-height:number`	The height of one content panel.
`neighbor-rotation-y:number`	A Y-axis rotation applied to neighbors of the currently centered panel. This is used to tilt the neighboring panels.
`neighbor-translation-x:number`	An X-axis translation applied to neighbors of the currently centered panel. Used to adjust placement of neighboring panels.
`neighbor-translation-y:number`	A Y-axis translation applied to neighbors of the currently centered panel.
`neighbor-translation-z:number`	A Z-axis translation applied to neighbors of the currently centered panel.
`exit-urls:string`	A comma-separated string of exit URLs, corresponding to the images in the the gallery.
`show-reflection:boolean`	Whether to show a CSS3-based reflection.
`pause-front-media:boolean`	When the current frame changes, whether to pause media elements (e.g., video or audio) on the previous frame.
`resume-next-media:boolean`	When the current frame changes, whether to resume media elements (e.g., video or audio) on the new current frame.

Events

Name	Description
`firstinteraction`	Sent when the user interacts with the gallery for the first time.
`allframesviewed`	Sent when all frames of the gallery have been shown at least once.
`allframesloaded`	Sent when all frames of the gallery are loaded.
`autoplayended`	Sent when autoplay has ended for any reason. `event.detail.completed` will be true if it ended naturally by reaching the intended duration elapsing; else it will be false.
`frameshown`	Sent when a new frame is shown.
`frameactivated`	Sent when a new frame has started to be activated, even if it's not yet visible.
`frameautoplayed`	Sent when a frame is activated for autoplay. This may trigger more often than `frameshown`, because it will be fired separately for each of multiple frames that are visible at once.
`frametap`	Sent when the user taps on a frame.
`reachleftend`	Sent when the gallery reaches its left end.
`reachrightend`	Sent when the gallery reaches its right end.
`trackstart`	Sent when the mouse or touch drag begins.
`track`	The component registers the X and Y location data associated with the mouse or touch drag.
`trackend`	Sent when the mouse or touch drag ends.

Methods

Name	Description
`goToFrame(index:number, opt_animate:string)`	Go to the frame specified.
`goForwards(opt_animate:string)`	Go to the next frame if available.
`goBackwards(opt_animate:string)`	Go to the previous frame.
`rotateOnce(opt_duration:number, opt_direction:string)`	Show every frame in the gallery once.
`stopRotation()`	Halts current automatic rotation.

Cue Point

`gwd-cuepoint`

A component that is attached to a Video component and fires an event when the video reaches a specific time.

Properties

Name	Description
`time:number`	The time at which the event is triggered, in seconds.

Events

Name	Description
`cuepoint`	Sent when playback of the media has reached a time defined in a cue point.

Methods

Name	Description
`seek()`	Sets the video time to a cue point's time.
`setTime(time:number)`	Sets the cue point's time.

Date Swap

`gwd-dateswap`

Date Swap will change the visibility of the element based on how the current date compares to the target date range.

Properties

Name	Description
`from_date:string`	A string representing an RFC2822 or ISO 8601 date.
`to_date:string`	A string representing an RFC2822 or ISO 8601 date.

Events

Name	Description
`before`	Sent when the current date is before the `from_date` (exclusive).
`during`	Sent when the current date is between the `from_date` and the `to_date` (inclusive).
`after`	Sent when the current date is after the `to_date` (exclusive).

Methods

Name	Description
`checkDate()`	Compares the current date with the date range.

Gallery Navigation

`gwd-gallerynavigation`

A navigation control for a Google Web Designer gallery component.

Properties

Name	Description
`for:string`	A comma-separated string of image paths used in the gallery.
`highlight:color`	A CSS color code used to highlight the active frame in navigation.
`use-thumbnails:boolean`	Whether thumbnails should be used for navigation instead of dots.

Generic Ad

`gwd-genericad`

Implements the generic ad container.

Events

Name	Description
`adinitialized`	Sent just before the generic element renders the ad's content.

Methods

Name	Description
`initAd()`	Starts the ad upon receiving the appropriate events from the enabler.
`goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)`	Navigates to the expanded dimensions of the ad. If a page ID is not specified, the ad navigates to the default page.
`exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)`	Exits the ad and optionally collapses the ad.

Gesture

`gwd-gesture`

Abstraction for a number of gesture events.

Properties

Name	Description
`touch-action:string`	How the touch action should be interpreted. Valid values are: `auto`, `none`, `pan-x`, and `pan-y`. Default behavior is the same as it is set to `none`.

Events

Name	Description
`hover`	Sent when the mouse or touch location enters the component boundary.
`hoverend`	Sent when the mouse or touch location leaves the component boundary.
`trackstart`	Sent when the mouse or touch drag begins.
`track`	The component registers the X and Y location data associated with the mouse or touch drag.
`trackend`	Sent when the mouse or touch drag ends.
`tap`	Sent when a user tap or mouse click is registered.
`swipeleft`	Sent when the user swipes left.
`swiperight`	Sent when the user swipes right.
`swipeup`	Sent when the user swipes up.
`swipedown`	Sent when the user swipes down.

Google Ad

`gwd-google-ad`

Implements the Google ad container.

Properties

Name	Description
`polite-load:boolean`	Whether this ad must respect the polite loading semantics.
`fullscreen:boolean`	Whether this ad should attempt to expand fullscreen or not.

Events

Name	Description
`adinitialized`	Sent just before the element renders the ad's content.
`expandstart`	Sent when the enabler fires expand start event.
`expandfinish`	Sent when the enabler fires expand finish event.
`collapsestart`	Sent when the enabler fires collapse start event.
`collapsefinish`	Sent when the enabler fires collapse finish event.
`fullscreensupport`	Sent if fullscreen expansion is supported.

Methods

Name	Description
`initAd()`	Starts the ad upon receiving the appropriate events from the enabler.
`goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)`	Navigates to the expanded dimensions of the ad. If a page ID is not specified, the ad navigates to the default page.
`exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)`	Exits the ad and optionally collapses the ad.
`exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)`	Exits the ad to the specified URL regardless of the value defined in Studio. Collapses the ad if `opt_collapseOnExit` is true.
`incrementCounter(metric:string, opt_isCumulative:boolean)`	Tracks a counter event.
`startTimer(timerId:string)`	Starts an event timer.
`stopTimer(timerId:string)`	Stops an event timer.
`reportManualClose()`	Records a manual closing of a floating, pop-up, expanding, in-page with pop-up, or in-page with floating ad. This method is a proxy for `Enabler.reportManualClose`.

Hotspot

`gwd-hotspot`

A component that shows and hides a hotspot at specific times of a video.

Properties

Name	Description
`show-time:number`	The time at which the hotspot starts being visible, in seconds.
`hide-time:number`	The time at which the hotspot stops being visible, in seconds.
`left:string`	The left position of the hotspot above the video relative to the video frame width (e.g., 5%).
`top:string`	The top position of the hotspot above the video relative to the video frame height (e.g., 5%).
`width:string`	The width of the hotspot above the video relative to the video frame width.
`height:string`	The height of the hotspot above the video relative to the video frame height.

Events

Name	Description
`hotspotshown`	Sent when the hotspot becomes visible.
`hotspothidden`	Sent when the hotspot becomes hidden.

Methods

Name	Description
`show(showHide:boolean)`	Changes hotspot visibility. Makes the hotspot visible if `showHide` is true, and hides the hotspot if `showHide` is false.
`seek(showHide:boolean)`	Sets a video time to the show or hide time of the hotspot. Uses the show time if `showHide` is true, and uses the hide time if `showHide` is false.
`setTimes(showTime:number, hideTime:number)`	Sets the hotspot's show and hide times.

IFrame

`gwd-iframe`

A component that wraps an HTMLIframeElement.

Properties

Name	Description
`source:string`	The source of the iframe. This replaces the `src` attribute on the native image element.
`scrolling:string`	Whether the iframe should display scrollbars.

Events

Name	Description
`iframeload`	Sent when the iframe is loaded.

Methods

Name	Description
`setUrl(url:string)`	Changes the URL of the iframe and loads it right away.

Image

`gwd-image`

A component that wraps an HTMLImageElement to support deferred loading of the image source.

Properties

Name	Description
`source:file`	The source of the image. This replaces the `src` attribute on the native image element.
`alt:string`	The alternate text for the image.
`scaling:string`	Defines how the image will be scaled to fit its frame.
`alignment:string`	How the image should align within the viewing area.

Image Button

`gwd-imagebutton`

An image button with support for up/over/down states.

Properties

Name	Description
`up-image:file`	The URL for the image of the button in the unpressed state.
`over-image:file`	The URL for the image of the button in the mouseover or hover state.
`down-image:file`	The URL for the image of the button in the pressed state.
`bgcolor:string`	The background color of the button.
`alignment:string`	How the image should align within the viewing area.
`scaling:string`	How the image should fit in the parent container.
`disabled:boolean`	Whether the button should be disabled.

Events

Name	Description
`imagebuttonloaded`	Sent when all the images have loaded.

Methods

Name	Description
`toggleEnable()`	Toggles between enabled/disabled.
`setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string)`	Sets the image sources for all button states.

Map

`gwd-map`

Extends HTMLElement to wrap Google Maps API calls

Properties

Name	Description
`api-key:string`	Google API key. See: https://developers.google.com/maps/documentation/javascript/get-api-key.
`query:string`	Search query name for returning locations from the Google Places API. Required if no Fusion Table ID.
`start-latitude:decimal`	Starting center latitude coordinate. Value should be between -90 and 90 (degrees).
`start-longitude:decimal`	Starting center longitude coordinate. Value should be between -180 and 180 (degrees).
`request-user-location:boolean`	Whether the user location must be requested. If set to true, the user will be prompted to share the location.
`fusion-table-id:string`	The ID of a public Google Fusion Table.
`client-id:string`	The Google Maps Premier Client ID. (Deprecated.)
`search-radius:number`	Minimum radius in which to conduct a location search, in meters.
`result-limit:number`	The maximum number of results to return in a single query.
`start-zoom:number`	Starting zoom level, in units used by the Google Maps API. Default is 16, which is at the neighborhood level.
`marker-src:string`	Placemarker image filename, as a sprite containing the off, on, and shadow components.
`gps-src:string`	GPS location blue dot image filename.
`msg-start-position-prompt:string`	Localization string for the dialog prompt text to select a start position.
`msg-gps-button-label:string`	Localization string for the label of the button which retrieves a the users location from the geolocation API.
`msg-manual-position-button-label:string`	Localization string for the label of the button which brings up a location search field.
`msg-manual-position-prompt:string`	Localization string for the dialog prompt text to search for a starting map position.
`msg-manual-position-placeholder:string`	Localization string for the placeholder text of the search box for finding a starting map position.
`msg-geocode-failure:string`	Localization string for the dialog prompt text shown when an attempt to use the geolocation API fails.
`msg-no-results-found:string`	Localization string for the dialog prompt text shown when no map results were found in the chosen location.

Events

Name	Description
`pinclick`	When the user selects a pin on the map.

Methods

Name	Description
`setCenter(latitude:number, longitude:number, opt_accuracy:number)`	Sets the center of the map to the location specified by latitude/longitude.

Page

`gwd-page`

A page represents a single card in the page deck.

Properties

Name	Description
`expanded:boolean`	Whether this page should be considered as an expanded page (ad-specific).
`centered:boolean`	Whether the contents of this page should be centered.
`alt-orientation-page:string`	The page ID of the page that better represents this content in the alternate orientation.

Events

Name	Description
`attached`	Sent just after the page is attached to the DOM.
`detached`	Sent just after the page is removed from the DOM.
`pageactivated`	Sent when the page is ready to be displayed.
`pagedeactivated`	Sent when the page is no longer being displayed.
`pageload`	Sent after page's contents have loaded successfully.
`pagepresenting`	Sent just before the page begins its intro animation.
`shake`	Sent when a device shake gesture is detected.
`tilt`	Sent when a device tilt is detected.
`rotatetoportrait`	Sent when a device is rotated to portrait orientation.
`rotatetolandscape`	Sent when a device is rotated to landscape orientation.

Page Deck

`gwd-pagedeck`

A page deck is a container of pages. It shows one page at a time and different pages may be cycled to the front in any given order and using any of the supported page transitions.

Properties

Name	Description
`default-page:string`	ID of the default page.

Events

Name	Description
`pagetransitionstart`	Sent before a page transition occurs.
`pagetransitionend`	Sent after a page transition completes.

Methods

Name	Description
`goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	Navigates to the next page in the page deck.
`goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	Navigates to the previous page in the page deck.
`goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	Navigates to the specified page in the page deck.
`getCurrentPage()`	Returns the current page, or null if a page is not shown.
`getDefaultPage()`	Returns the default page if specified, otherwise returns the first page.
`getPage(pageId:string)`	Returns the page with the specified ID.
`findPageIndexByAttributeValue(attributeName:string, value:string\|number\|boolean)`	Returns the page element with the value of the attribute equal to the specified value or -1 if a page was not found.
`getOrientationSpecificPage(orientation:string, pageId:string)`	Returns the page corresponding to the specified orientation.
`getElementById(id:string)`	Finds the element with the specified ID across all pages in this pagedeck. Since `gwd-pagedeck` only keeps the active page in the DOM, the standard `document.getElementById(id)` will not return the elements in the inactive pages. It is a common use case, especially in dynamic ads, to refer to elements in inactive pages. In such cases, this method can be used to dereference an element by its ID.

Examples

Going to the next page in your ad after a two second pause

This code example presumes you have at least two pages in your ad. Then you can create an event to change pages every 2 seconds like this:

Target - Choose the page. The first page will be page1.
Event - Choose Page > Ready to present the page
Action - Choose Custom > Add custom action

In the Custom Code dialog, name your function, In this case, you might use a name such as turnpage. Then use the following code:

setTimeout(nextPage, 2000);
function nextPage() {
   document.getElementById('pagedeck').goToNextPage();
}

Then add the same event to each page using the same custom action.

Parallax

`gwd-parallax`

A Parallax component.

Properties

Name	Description
`images:string`	Placeholder attribute so the Properties panel shows a Parallax `assetList` control.
`yscroll:decimal`	The scroll factor to use for the Parallax animation when rendering on stage.

Events

Name	Description
`ready`	Sent when all the assets in the Parallax component are loaded.

Particle Effects

`gwd-particleeffects`

A component that displays animations generated by particle systems. Each particle effect within the component also has its own set of properties.

Properties

Name	Description
`autoplay:boolean`	Whether to automatically play the animation when the component is loaded.
`time-limit:number`	Animation time limit. A value of -1 signifies no time limit. Default is 29 seconds.

Properties for individual effects

`gwd-particles`

Properties

Name	Description
`acceleration-x:number`	Horizontal acceleration. The rate at which the horizontal speed changes per frame, which is added to a particle's current horizontal speed.
`acceleration-y:number`	Vertical acceleration. The rate at which the vertical speed changes per frame, which is added to a particle's current vertical speed.
`angle-max:number`	The maximum angle for the initial direction of particle movement, from -360 to 360.
`angle-min:number`	The minimum angle for the initial direction of particle movement, from -360 to 360.
`autoplay:boolean`	Whether to automatically play the animation when the parent Particle Effects component starts playing.
`color1:color`	The first color.
`color2:color`	The second color.
`emit-interval:number`	The number of frames between each new particle getting generated.
`emit-x-max:string`	The maximum x coordinate of the particle origin area.
`emit-x-min:string`	The minimum x coordinate of the particle origin area.
`emit-y-max:string`	The maximum y coordinate of the particle origin area.
`emit-y-min:string`	The minimum y coordinate of the particle origin area.
`loop:boolean`	Whether to loop the animation.
`number:number`	The total number of particles generated if the animation for this effect isn't stopped or looped.
`opacity-min:number`	The minimum initial opacity of the particles.
`opacity-max:number`	The maximum initial opacity of the particles.
`opacity-rate:number`	The rate at which the opacity changes per frame, which is added to a particle's current opacity.
`random-colors:boolean`	Whether the particles are generated in a random color between `color1` and `color2`. If `false`, all particles are initialized with `color1`.
`shape:string`	The shape of the particle. `square` `circle` `line` `teardrop` `image`
`size-max:number`	The maximum size of the particles in pixels.
`size-min:number`	The minimum size of the particles in pixels.
`size-rate:number`	The rate at which the size changes per frame, which is added to a particle's current size.
`skip-forward:number`	The starting point of the animation, expressed as a percentage of total particles generated.
`speed-max:number`	The maximum speed of the particles in pixel per frame.
`speed-min:number`	The minimum speed of the particles in pixels per frame.
`sprite-image-src:file`	The source of the image used for the particle shape.
`turbulence-frequency:number`	The frequency of the turbulence. Higher values cause more frequent irregularities in the motion. It should be a positive number.
`turbulence-rate:number`	The rate at which the strength changes over time.
`turbulence-strength:number`	The strength of the turbulence exerting on the particles. It should be a positive number.
`turbulence-trail:number`	How many previous and current states of a particle to render.

Events

Name	Description
`timelimitreached`	Sent when the animation playback has reached the specified time limit.

Methods

Name	Description
`play()`	Plays the animation.
`pause()`	Pauses the animation.
`stop()`	Stops the animation.

Sprite Sheet

`gwd-spritesheet`

Show a single keyframe or animation from a sprite sheet.

Properties

Name	Description
`imagesource:file`	The URL for the sprite sheet image.
`offsetx:number`	The offset, in pixels, from the left side of the sprite sheet to either: the left edge of the specific image you want to use from the sprite sheet the left edge of the first sprite image you're using to create an animation
`offsety:number`	The offset, in pixels, from the top of the sprite sheet to either: the top edge of the specific image you want to use from the sprite sheet the top edge of the first sprite image you're using to create an animation
`clipwidth:number`	The width, in pixels, of either: the specific image you want to use from the sprite sheet the first sprite image you're using to create an animation
`clipheight:number`	The height, in pixels, of either: the specific image you want to use from the sprite sheet the first sprite image you're using to create an animation
`alignment:string`	Determines the position of the image within its container.
`scaling:string`	Determines how various sized images are displayed within the component.
`totalframecount:number`	The number of frames that make up the animation.
`duration:number`	The duration of each frame, in milliseconds.
`loopcount:number`	The number of times the animation repeats. Set to 0 for infinite repeat.
`autoplay:boolean`	Whether the animation plays automatically.
`endonstartframe:boolean`	Whether the animation ends on the initial frame.
`reverseplay:boolean`	Whether the animation plays in reverse.

Events

Name	Description
`animationend`	Sent when the animation ends.
`animationpause`	Sent when the animation is paused.
`animationplay`	Sent when the animation starts to play.
`animationrestart`	Sent when the animation is restarted after a pause.

Methods

Name	Description
`newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean)`	Defines a new animation.
`play()`	Plays the animation.
`pause()`	Pauses the animation.
`togglePlay()`	Switch animation between play and pause.
`restart()`	Restarts the animation.
`previousFrame()`	Shows the previous frame.
`nextFrame()`	Shows the next frame.
`goToFrame(id:number)`	Shows a specific frame by frame number.

Star Ratings

`gwd-starratings`

A component for rendering a line of stars representing a rating.

Properties

Name	Description
`ratingvalue:decimal`	Rating value.
`iconsize:number`	Star icon size.
`isemptyshown:boolean`	Whether the empty star icons are shown.
`isemptycolored:boolean`	Whether the empty star icons are colored.
`colorprimary:color`	Primary fill color.
`colorsecondary:color`	Secondary gradient color.
`gradienttype:string`	Gradient type.
`ratingmax:number`	Maximum star rating.
`ratingmin:number`	Minimum star rating.

Events

Name	Description
`complete`	Sent when the Star Ratings icons have been created.
`validationerror`	Sent when the Star Ratings rating value is less than the minimum rating.

Street View

`gwd-streetview`

A Google Street View component.

Properties

Name	Description
`key:string`	Your Google Maps Platform API key. For information about obtaining a unique key for your application, see: https://developers.google.com/maps/documentation/javascript/get-api-key.
`latitude:decimal`	The location's latitude value.
`longitude:decimal`	The location's longitude value.
`interaction:boolean`	Whether the view can be panned/rotated.
`heading:decimal`	Indicates the compass heading of the camera. Accepted values are from 0 to 360 (both values indicating north, with 90 indicating east, and 180 south). If no heading is specified, a value will be calculated that directs the camera towards the specified location, from the point at which the closest photograph was taken.
`pitch:decimal`	Specifies the upward or downward angle of the camera relative to the Street View vehicle. This is often, but not always, flat horizontal. Positive values angle the camera up (with 90 degrees indicating straight up); negative values angle the camera down (with -90 indicating straight down).
`zoom:number`	Specifies the zoom of the camera relative to the Street View vehicle.

Swipeable Gallery

`gwd-swipegallery`

A gallery object that shows its frames in a swipeable content strip.

Properties

Name	Description
`images:string`	A comma-separated string of image paths used in the gallery.
`groups:string`	A comma-separated string of group IDs.
`transition-duration:number`	The gallery animation speed in milliseconds.
`start-frame:number`	One-based frame to start at.
`num-frames-to-display:number`	The number of frames to display at once.
`frame-snap-interval:number`	The number of frames to advance by after each swipe.
`autoplay:boolean`	Whether to automatically rotate the gallery once.
`has-navigation:boolean`	Whether to include gallery navigation controls.
`navigation-thumbnails:boolean`	Whether thumbnails should be used for navigation instead of dots.
`navigation-highlight:color`	A CSS color code used to highlight the active frame in navigation.
`scaling:string`	How image content will be scaled to fit its frame.
`swipe-axis:string`	The axis in which swipe is detected.
`offset:number`	The amount of empty space between adjacent content frame.
`frame-width:number`	The width of one content frame. Overrides `num-frames-to-display`.
`frame-height:number`	The height of one content frame.
`autoplay-duration:number`	The total duration for which to autoplay the frames.
`autoplay-step-interval:number`	The interval between each frame step during autoplay.
`exit-urls:string`	A comma-separated string of exit URLs, corresponding to the images in the the gallery.
`disable-gesture:boolean`	Hides/disables the gesture component which enables touch navigation of the gallery.
`pause-front-media:boolean`	When the current frame changes, whether to pause media elements (e.g., video or audio) on the previous frame.
`resume-next-media:boolean`	When the current frame changes, whether to resume media elements (e.g., video or audio) on the new current frame.

Events

Name	Description
`firstinteraction`	Sent when the user interacts with the gallery for the first time.
`allframesviewed`	Sent when all frames of the gallery were shown at least once.
`allframesloaded`	Sent when all frames of the gallery are loaded.
`autoplayended`	Sent when autoplay has ended for any reason. `event.detail.completed` will be true if it ended naturally by reaching the intended duration elapsing, else it will be false.
`frameshown`	Sent when a new frame is shown, after any necessary animations have completed.
`frameactivated`	Sent when a new frame has started to be activated, even if it's not yet visible.
`frameautoplayed`	Sent when a frame is activated for autoplay. This may trigger more often than `frameshown`, because it will be fired separately for each of multiple frames that are visible at once.
`frametap`	Sent when the user taps on a frame.
`reachleftend`	Sent when the gallery reaches its left end.
`reachrightend`	Sent when the gallery reaches its right end.
`framemouseover`	Sent when the user moves the mouse over a frame.
`framemouseout`	Sent when the user moves the mouse out of a frame.
`trackstart`	Sent when the mouse or touch drag begins.
`track`	The component registers the X and Y location data associated with the mouse or touch drag.
`trackend`	Sent when the mouse or touch drag ends.

Methods

Name	Description
`goToFrame(frame:number, opt_animate:string)`	Goes to the frame specified.
`rotateOnce(opt_duration:number, opt_direction:string)`	Shows every frame in the gallery once.
`stopRotation()`	Halts current automatic rotation.
`goForwards()`	Moves gallery forwards by one frame.
`goBackwards()`	Moves gallery backwards by one frame.

Examples

Showing a caption for each frame in a Swipeable Gallery

This code example lets you create captions for each image in a swipeable gallery. This presumes that you've placed a Swipeable Gallery component with the ID gwd-swipegallery_1 (which is the default) on stage, and have added images to the component.

For the captions, you'll also need to create a div element, and give it the ID caption-div. Then create an event like this:

Target - Choose the Swipeable gallery which should have the ID gwd-swipegallery_1
Event - Choose Swipeable Gallery > Frame shown
Action - Choose Custom > Add custom action

In the Custom Code dialog, name your function. In this case, you might use a name such as showcaption. Then use the following code:

var gallery = document.getElementById('gwd-swipegallery_1');
var div = document.getElementById('caption-div');
var text = {
  1: "The text for frame 1",
  2: "The text for frame 2",
  3: "The text for frame 3"
};
div.textContent = text[gallery.currentIndex];

Tap Area

`gwd-taparea`

Abstraction for a click/tap event.

Properties

Name	Description
`exit-override-url:string`	The URL to exit to when the Tap Area is tapped.

Events

Name	Description
`action`	Sent when the user touches (mobile) or clicks (desktop) the button.

Tap to Call / Text

`gwd-taptocall`

A component that, when clicked or touched, will call or send an SMS to the configured telephone number.

Properties

Name	Description
`number:string`	Telephone number to call or message.
`action:string`	Choose to send an SMS message or initiate a phone call.

Events

Name	Description
`action`	Sent when the user touches (mobile) or clicks (desktop) the button.
`taptocall`	Sent when a call or SMS is being initiated.

Methods

Name	Description
`dial()`	Initiates the call or sends an SMS message to the configured number.

Transition Gallery

`gwd-transitiongallery`

A component that displays a series of images in sequence with animation effects between each image. Look up the specific transition type below for a list of properties.

Properties for specific transition types

Transition type: Blinds

`gwd-blinds`

The blinds effect type for the Transition Gallery, which reveals the new image as though from behind window blinds.

Properties

Name	Description
`direction:string`	The direction of the effect. The default is left to right. `lefttoright` - Left to right. `righttoleft` - Right to left. `toptobottom` - Top to bottom. `bottomtotop` - Bottom to top.
`blinds:number`	The number of blinds, from 1-20. The default is 5.
`transparentbackground:boolean`	Whether to reveal the transparent background before rendering the new image's blinds. If `false`, the blinds overlay the old image.

Transition type: Door wipe

`gwd-door-wipe`

A variation of the wipe effect for the Transition Gallery, revealing the new image as though double doors are opening or closing.

Properties

Name	Description
`orientation:string`	The orientation of the animation. `horizontal` - Horizontal. `vertical` - Vertical.
`direction:string`	The direction of the effect. `opening` - Opening. `closing` - Closing.

Transition type: Iris wipe

`gwd-iris-wipe`

A variation of the wipe effect for the Transition Gallery, which reveals the new image within a growing circle.

Properties

Name	Description
`originpercentx:number`	The origin of the growing circle in the x-axis as a percentage of the frame's width, from 0-100. The default is 50.
`originpercenty:number`	The origin of the growing circle in the y-axis as a percentage of the frame's height, from 0-100. The default is 50.

Transition type: Push

`gwd-push`

The push effect type for the Transition Gallery, where the new image slides into view while pushing the old image out of view.

Properties

Name	Description
`direction:string`	The direction of the effect. The default is left to right. `lefttoright` - Left to right. `righttoleft` - Right to left. `toptobottom` - Top to bottom. `bottomtotop` - Bottom to top.

Transition type: Radial wipe

`gwd-radial-wipe`

A variation of the wipe effect for the Transition Gallery, where the new image is revealed by sweeping a radius around a specified point, like a clock hand.

Properties

Name	Description
`direction:string`	The direction of the effect. The default is clockwise. `clockwise` - Clockwise. `counterclockwise` - Counterclockwise.
`originpercentx:number`	The origin of the sweeping radius in the x-axis as a percentage of the frame's width, from 0-100. The default is 50.
`originpercenty:number`	he origin of the sweeping radius in the y-axis as a percentage of the frame's height, from 0-100. The default is 50.

Transition type: Rotate

`gwd-rotate`

The rotate effect type for the Transition Gallery, which spins the old image while zooming in, then zooms back out on the new image while completing the spin rotation.

Properties

Name	Description
`direction:string`	The direction of the effect. The default is clockwise. `clockwise` - Clockwise. `counterclockwise` - Counterclockwise.

Transition type: Slice

`gwd-slice`

The slice effect type for the Transition Gallery, which reveals the new image in slices or bars which slide into view one after another.

Properties

Name	Description
`direction:string`	The direction of the effect. The default is left to right. `lefttoright` - Left to right. `righttoleft` - Right to left. `toptobottom` - Top to bottom. `bottomtotop` - Bottom to top.
`slices:number`	The number of slices, from 1-20. The default is 5.
`transparentbackground:boolean`	Whether to reveal the transparent background before the new image slices in. If `false`, the slices overlay the old image.

Transition type: Split push

`gwd-split-push`

A variation of the push effect for the Transition Gallery, where the old image is split into two parts vertically or horizontally. Corresponding split parts of the new image push each part of the old image out of view in opposite directions.

Properties

Name	Description
`orientation:string`	The orientation of the animation. `horizontal` - Horizontal. `vertical` - Vertical.

Transition type: Stripe wipe

`gwd-stripe-wipe`

A variation of the wipe effect for the Transition Gallery, in which solid colored stripes of alternating colors simultaneously grow on the screen to cover the old image. The stripes then shrink to reveal the new image.

Properties

Name	Description
`direction:string`	The direction of the effect. `lefttoright` - Left to right. `righttoleft` - Right to left. `toptobottom` - Top to bottom. `bottomtotop` - Bottom to top. `bottomlefttotopright` - Bottom left to top right. `toplefttobottomright` - Top left ot bottom right. `bottomrighttotopleft` - Bottom right to top left. `toprighttobottomleft` - Top right to bottom left.
`stripes:number`	The number of stripes of each color, from 1-10. The default is 2.
`color1:string`	One of the two alternating stripe colors as a hexadecimal color code. The default is #FFFFFF.
`color2:string`	The other alternating stripe color as a hexadecimal color code. The default is #FFA500.

Transition type: Venetian blinds

`gwd-venetian-blinds`

A variation of the blinds effect for the Transition Gallery, which reveals the new image as though from behind Venetian blinds.

Properties

Name	Description
`orientation:string`	The orientation of the animation. The default is vertical. `vertical` - Vertical. `horizontal` - Horizontal.
`blinds:number`	The number of blinds, from 1-20. The default is 5.
`staggered:boolean`	Whether the slats transition one after another. If `false`, all the slats transition simultaneously.

Transition type: Wipe

`gwd-wipe`

The wipe effect type for the Transition Gallery, where the new image gradually replaces the old image behind a line that wipes from one edge to the opposite edge.

Properties

Name	Description
`direction:string`	The direction of the effect. The default is vertical. `lefttoright` - Left to right. `righttoleft` - Right to left. `toptobottom` - Top to bottom. `bottomtotop` - Bottom to top.
`angle:number`	The angle of the wiping line in degrees, from -89 to 89. The default is 0.

Transition type: Zigzag

`gwd-zigzag`

The zigzag effect type for the Transition Gallery, which reveals the new image in a snaking grid pattern, revealing tiles of the new image in successive rows or columns in alternating directions.

Properties

Name	Description
`orientation:string`	The orientation of the effect. `horizontal` - Horizontal. `vertical` - Vertical.
`rows:number`	The number of rows of tiles used the zigzag effect, from 1-20. The default is 5.
`columns:number`	The number of columns of tiles used in the zigzag effect, from 1-20. The default is 5.

Events

Name	Description
`autoplayended`	Sent when autoplay has ended for any reason. `event.detail.completed` will be `true` if it ended naturally by reaching the intended loop count, and otherwise `false`.
`frameactivated`	Sent when a new frame is initially activated, even if it's not yet visible.
`frameshown`	Sent when a new frame is shown.
`frametap`	Sent when the user taps on a frame.
`rotateonceended`	Sent when rotation has ended for any reason. `event.detail.completed` will be `true` if it ended naturally, and otherwise `false`.
`reachleftend`	Sent when the gallery reaches its left end.
`reachrightend`	Sent when the gallery reaches its right end.

Methods

Name	Description
`goToFrame(frame:number, with_animation:boolean)`	Goes to the frame specified.
`rotateOnce(startFromCurrentFrame:boolean)`	Shows each frame in the gallery, beginning with the start frame if `startFromCurrentFrame` is `false` or unspecified, and otherwise from the current frame. The rotation stops before it reaches the start frame.
`startAutoplay(startFromCurrentFrame:boolean)`	Begins autoplaying the gallery from the start frame if `startFromCurrentFrame` is `false` or unspecified, and otherwise from the current frame. The autoplay stops when it reaches the loop count.
`stop()`	Cancels any animation in progress.
`goForwards()`	Moves the gallery forwards by one frame.
`goBackwards()`	Moves gallery backwards by one frame.

Video

`gwd-video`

A component that wraps an HTMLVideoElement.

Properties

Name	Description
`autoplay:boolean`	Whether the video should autoplay when loaded.
`loop:boolean`	Whether the video should loop when completed.
`muted:boolean`	Whether the video should start muted.
`controls:boolean`	Whether the default native player controls are enabled.
`sources:file`	A comma-separated string of videos in different formats.
`poster:string`	A URL indicating a poster frame to show until the user plays or seeks.

Events

Name	Description
`play`	Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior pause event.
`pause`	Sent when playback is paused.
`playing`	Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).
`ended`	Sent when playback completes.
`volumechange`	Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
`seeked`	Sent when a seek operation completes.
`waiting`	Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

Methods

Name	Description
`mute()`	Toggle to mute/unmute the video.
`pause()`	Pauses the video.
`play()`	Plays the video.
`replay()`	Replays the video.
`seek(time:number)`	Jumps to the specified time in the video.
`setVolume(volume:number)`	Set the volume of the video.
`setSources(sources:string)`	Set the sources for the video.

Examples

Unmuting a video each time it's played

To unmute a video each time it's played, create an event like this:

Target - Choose the video you want to control. If you have one video, the default ID will be gwd-video_1
Event - Choose Video > play after pause
Action - Choose Custom > Add custom action

In the Custom Code dialog, name your function, In this case, you might use a name such as mutebtn. Then use the following code:

if (document.getElementById('gwd-video_1').muted) {
  document.getElementById('gwd-video_1').mute();
}

YouTube

`gwd-youtube`

Extends HTMLElement to wrap YouTube API calls.

Properties

Name	Description
`video-url:string`	The YouTube URL for the video.
`autoplay:string`	For supported environments, the YouTube video will autoplay upon loading.
`preview-duration:number`	Set the duration of the preview. Used only when autoplay attribute is set to `preview`.
`controls:string`	Displays the video controls (`none`, `autohide`).
`color:string`	The color theme of the player progress bar (red or white).
`muted:boolean`	Whether the video should start muted.
`annotations:boolean`	Shows the annotations for the video.
`related:boolean`	Shows related videos once the video is complete.
`loop:boolean`	Whether the video should loop when completed.
`pause-on-end:boolean`	Pauses the video when there is 1 second left.
`start-position:number`	Start the video at a given time (seconds).
`allowfullscreen:boolean`	Allow fullscreen on desktop.
`extra-player-args:string`	Additional YouTube player parameters as described in https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters.

Events

Name	Description
`buffering`	The YouTube player is buffering.
`ended`	The YouTube video has reached the end.
`paused`	The YouTube video is paused.
`playing`	The YouTube video starts playing.
`replayed`	The YouTube video has been replayed.
`viewed0percent`	Sent when 0% of the video has been viewed.
`viewed25percent`	Sent when 25% of the video has been viewed.
`viewed50percent`	Sent when 50% of the video has been viewed.
`viewed75percent`	Sent when 75% of the video has been viewed.
`viewed100percent`	Sent when 100% of the video has been viewed.
`previewed0percent`	Sent when 0% of the preview has been viewed.
`previewed25percent`	Sent when 25% of the preview has been viewed.
`previewed50percent`	Sent when 50% of the preview has been viewed.
`previewed75percent`	Sent when 75% of the preview has been viewed.
`previewed100percent`	Sent when 100% of the preview has been viewed.

Methods

Name	Description
`toggleMute()`	Toggle to mute/unmute the video.
`pause()`	Pauses the video.
`play()`	Plays the video.
`replay()`	Replays the video.
`seek(time:number)`	Jumps to the specified time in the video.
`setYouTubeId(id:string, opt_cueOnly:boolean)`	Changes the source of the YouTube video to the specified ID.

Was this helpful?

How can we improve it?