# Radical API Radical API is a set of methods and properties that you can use to manage your creatives. You can use the API to access and control the elements in your creatives. ### RAD object Our rendering library called Radical exposes some helper functions you can you while working on your creative you can access them by initializing the \`rad\` object by calling ``` var rad = Radical.getAdByWindow(window); ``` The majority of functions available on the object are used internally by Radical, but a couple of them will come in handy when working with the creative. ``` rad.onRender(onAdRender); function onAdRender() { console.log('rendered'); } ``` This is called after all the elements in the creation are rendered and positioned by the Radical. Use the onLoad event to add DOM event listeners (click, mouse enter, mouse leave, ...) because onRender is called multiple times when you resize the ad, and the listeners would be added multiple times. ``` rad.onLoad(onAdLoaded); ``` This is called after the flowline for the creative was loaded but before the render. This is a good place to add any DOM event listeners, as this is called only once. ``` rad.onBeforeRender(onBeforeRender); ``` This event returns elements object with all the properties it they will render. You have an option to change these properties before the rendere here. Just update the object. The object is composed of keys that are element ID-s and values that are corresponding properties. ``` var sizes = rad.getMergedContent().sizes; ``` An array of all layout sizes we can render from. In the case of Fully-fluid format, this array is empty. ``` var layoutSize = rad.getRenderedSize(); ``` Size object of the layout currently rendering. ``` var element = rad.getElementById('e2'); ``` You can use \`getElementById\` to get an element reference, make sure you are calling this inside \`onRender\` callback. Check boilerplate code, for example. getElementById returns an object with \`domNode\` property pointing to actual DOM element and some other information about the element. Some elements, like the video, also contain useful functions to control the element.
### All Functions You can follow the Custom JavaScript Guide to learn how to use the Radical API in your creatives. * Name`addGlobalEventListener(event: string, callback: (arg: any) => void)`Description Adds a global event listener to the creative. The event listener will be triggered when the specified event occurs in the creative. * Name`animationTime(time: number)`Description Sets the animation time of the creative to the specified time in milliseconds. * Name`callTrackerURL(url: string)`Description Call the specified tracker URL. * Name`clearElements(elements: HTMLElement[])`Description Clears the specified elements from the creative. * Name`condeHideAd()`Description Hides the creative. * Name`createLightboxContainer()`Description Creates a lightbox container. * Name`creativeTimeSpent()`Description Returns the time spent on the creative in milliseconds. * Name`domEventHandler(event: string, callback: (arg: any) => void)`Description Adds a DOM event listener to the creative. The event listener will be triggered when the specified event occurs in the creative. * Name`forceRender()`Description Forces the creative to render. * Name`generateUUID()`Description Generates a UUID. * Name`getActiveConfig()`Description Returns the active config of the creative. * Name`getAdContent()`Description Returns the ad content of the creative. * Name`getAdRenderer()`Description Returns the ad renderer of the creative. * Name`getAdTagOptions()`Description Returns the ad tag options of the creative. * Name`getAdVersion()`Description Returns the ad version of the creative. * Name`getAnimationTimeline()`Description Returns the animation timeline of the creative. * Name`getAssets()`Description Returns the assets of the creative. * Name`getConfig()`Description Returns the config of the creative. * Name`getContainer()`Description Returns the container of the creative. * Name`getCookie(name: string)`Description Returns the value of the specified cookie. * Name`getCurrentMediaquery()`Description Returns the current media query of the creative. * Name`getDataLayer()`Description Returns the data layer of the creative. * Name`getDeviceInfo()`Description Returns the device info of the creative. * Name`getElementById(id: string)`Description Returns the element with the specified ID. * Name`getElementChildren(element: HTMLElement)`Description Returns the children of the specified element. * Name`getElementStyles(element: HTMLElement)`Description Returns the styles of the specified element. * Name`getExtension(extensionType: string)`Description Returns the extension of the specified type. * Name`getFormatLayouts()`Description Returns the format layouts of the creative. * Name`getLbNro()`Description Returns the lightbox number of the creative. * Name`getMergedContent()`Description Returns the merged content of the creative. * Name`getRenderedSize()`Description Returns the rendered size of the creative. * Name`getSizeFilter()`Description Returns the size filter of the creative. * Name`getState()`Description Returns the state of the creative. * Name`getUUID()`Description Returns the UUID of the creative. * Name`getUserInfo()`Description Returns the user info of the creative. * Name`getVisibleElementChildren(element: HTMLElement)`Description Returns the visible children of the specified element. * Name`hideCreative()`Description Hides the creative. * Name`isAdContentAvailable()`Description Returns true if the ad content is available, otherwise false. * Name`isOpenStateAdObj()`Description Returns true if the ad object is in open state, otherwise false. * Name`onAdContentAvailable(callback: (arg: any) => void)`Description Adds a callback to be triggered when the ad content is available. * Name`onAdHover(callback: (arg: any) => void)`Description Adds a callback to be triggered when the ad is hovered. * Name`onAnimationProgress(callback: (arg: any) => void)`Description Adds a callback to be triggered when the animation progresses. * Name`onBeforeRender(callback: (arg: any) => void)`Description Adds a callback to be triggered before the creative is rendered. * Name`onCarouselFirstSlide(callback: (arg: any) => void)`Description Adds a callback to be triggered when the carousel is on the first slide. * Name`onCarouselLastSlide(callback: (arg: any) => void)`Description Adds a callback to be triggered when the carousel is on the last slide. * Name`onCarouselMiddleSlide(callback: (arg: any) => void)`Description Adds a callback to be triggered when the carousel is on the middle slide. * Name`onClick(callback: (arg: any) => void)`Description Adds a callback to be triggered when the creative is clicked. * Name`onCountdownFinished(callback: (arg: any) => void)`Description Adds a callback to be triggered when the countdown finishes. * Name`onElementHover(callback: (arg: any) => void)`Description Adds a callback to be triggered when an element is hovered. * Name`onElementMouseOut(callback: (arg: any) => void)`Description Adds a callback to be triggered when the mouse leaves an element. * Name`onLoad(callback: (arg: any) => void)`Description Adds a callback to be triggered when the creative is loaded. * Name`onMediaEnded(callback: (arg: any) => void)`Description Adds a callback to be triggered when the media ends. * Name`onMediaPause(callback: (arg: any) => void)`Description Adds a callback to be triggered when the media is paused. * Name`onMediaPlaying(callback: (arg: any) => void)`Description Adds a callback to be triggered when the media is playing. * Name`onPreviewVideoEnd(callback: (arg: any) => void)`Description Adds a callback to be triggered when the preview video ends. * Name`onPreviewVideoStart(callback: (arg: any) => void)`Description Adds a callback to be triggered when the preview video starts. * Name`onRender(callback: (arg: any) => void)`Description Adds a callback to be triggered when the creative is rendered. * Name`onVideoEnd(callback: (arg: any) => void)`Description Adds a callback to be triggered when the video ends. * Name`onVideoMuted(callback: (arg: any) => void)`Description Adds a callback to be triggered when the video is muted. * Name`onVideoPause(callback: (arg: any) => void)`Description Adds a callback to be triggered when the video is paused. * Name`onVideoPlay(callback: (arg: any) => void)`Description Adds a callback to be triggered when the video is played. * Name`onVideoTimeUpdate(callback: (arg: any) => void)`Description Adds a callback to be triggered when the video time is updated. * Name`onVideoUnMuted(callback: (arg: any) => void)`Description Adds a callback to be triggered when the video is unmuted. * Name`onVideoUnableToAutoplay(callback: (arg: any) => void)`Description Adds a callback to be triggered when the video is unable to autoplay. * Name`pauseAnimation()`Description Pauses the animation of the creative. * Name`playAnimation()`Description Plays the animation of the creative. * Name`previewPageForceRender()`Description Forces the creative to render the preview page. * Name`refreshInteractionDisable()`Description Disables the refresh interaction of the creative. * Name`removeGlobalEventListener(event: string, callback: (arg: any) => void)`Description Removes the specified global event listener from the creative. * Name`renderElement(element: HTMLElement)`Description Renders the specified element in the creative. * Name`renderElementWithStyles(element: HTMLElement, styles: any)`Description Renders the specified element in the creative with the specified styles. * Name`restartAnimation()`Description Restarts the animation of the creative. * Name`seekAnimation(time: number)`Description Seeks the animation of the creative to the specified time in milliseconds. * Name`sendAdformAnalyticsEvent(event: string, data: any)`Description Sends an Adform analytics event with the specified event and data. * Name`sendAnalyticsEvent(event: string)`Description Sends an analytics event with the specified event. * Name`setConfig(config: any)`Description Sets the config of the creative to the specified config. * Name`setCookie(name: string, value: string, options: any)`Description Sets the specified cookie with the specified value and options. * Name`setCustomTracker(tracker: any)`Description Sets the custom tracker of the creative to the specified tracker. * Name`setLbNro(nro: number)`Description Sets the lightbox number of the creative to the specified number. * Name`setProgressAnimation(progress: number)`Description Sets the progress of the animation of the creative to the specified progress. * Name`setResponsiveMode(mode: string)`Description Sets the responsive mode of the creative to the specified mode. * Name`setSizeFilter(filter: any)`Description Sets the size filter of the creative to the specified filter. * Name`setState(state: any)`Description Sets the state of the creative to the specified state. * Name`setVideoInViewPercetage(percentage: number)`Description Sets the percentage of the video in view to the specified percentage. * Name`start()`Description Starts the creative. * Name`startAnimation()`Description Starts the animation of the creative. * Name`stopAnimation()`Description Stops the animation of the creative. * Name`updateAgTagOptions(options: any)`Description Updates the ad tag options of the creative to the specified options. * Name`updateAnimationTimeline(timeline: any, time: number)`Description Updates the animation timeline of the creative to the specified timeline and time. * Name`updateCustomCSS(css: string)`Description Updates the custom CSS of the creative to the specified CSS. * Name`updateCustomJs(js: string)`Description Updates the custom JavaScript of the creative to the specified JavaScript. * Name`updateElementStyles(element: HTMLElement, styles: any)`Description Updates the styles of the specified element to the specified styles.