Radical

Components

In this guide, we will take a look at different components a creative can have and how Radical API can help you manage them.

You can add Custom JavaScript to your creatives if you want to access and control the elements added from the editor.

Carousels are a great way to display multiple images or videos in a single ad unit. You can use the Radical API to create and manage carousels in your creatives.

  • Name
    animateToSlide(index: number): void
    Description

    Use this method to animate the carousel to a specific slide. The method takes a single argument, which is the index of the slide you want to animate to.

  • Name
    animateToSlideIndex(index: number): void
    Description

    Use this method to animate the carousel to a specific slide. The method takes a single argument, which is the index of the slide you want to animate to.

  • Name
    getCarouselPlayUUID(): string
    Description

    Use this method to get the UUID of the carousel play event.

  • Name
    getElementDataSource(): string
    Description

    A Carousel component can have a data source. Users can add this data source from the editor. This method returns the data source of the carousel.

  • Name
    getSlides(): Carousel Slide[]
    Description

    Use this method to get all the slides in the carousel.

    Carousel Slide Example

    {
  "destroy": "f()",
  "domNode": "div#a9mq0-0.rad-element",
  "getElementDataSource": "f()",
  "id": "a9mq0-0",
  "setSlideLink": "f(link: string)",
  "type": "carouselSlideWidget",
}
  • Name
    getElementDataSource(): ElementDataSource
    Description

    Use this method to get the data source of the carousel.

    Element Data Source Example

    {
  "destroy": "f()",
  "getLinkId": "f()",
  "getLinkedPropertyName": "f()",
  "getValue": "f()",
  "isLinkedToField": "f()",
  "setParameter": "f(e,t)",
  "value": "f(e)"
}
  • Name
    getVisibleSlideIndex(): number
    Description

    Use this method to get the index of the currently visible slide.

  • Name
    moveToSlide(index: number): void;
    Description

    Use this method to move the carousel to a specific slide. The method takes a single argument, which is the index of the slide you want to move to. This method does not animate the transition.

  • Name
    nextSlide(): void;
    Description

    Use this method to move the carousel to the next slide. It will use the first slide if the current slide is the last one.

  • Name
    onRender(callback: (arg: any) => void): void;
    Description

    Use this method to register a callback that will be called when the carousel is rendered.

  • Name
    pause(): void;
    Description

    Use this method to pause the carousel.

  • Name
    previousSlide(): void
    Description

    Use this method to move the carousel to the previous slide. It will use the last slide if the current slide is the first one.

  • Name
    removeSlide(index: number): void
    Description

    Use this method to remove a slide from the carousel. The method takes a single argument, which is the index of the slide you want to remove.

  • Name
    rendered(): boolean
    Description

    Use this method to check if the carousel is rendered.

  • Name
    resume(): void
    Description

    Use this method to resume the carousel.

  • Name
    setPausedCarouselAfterSlideChange(paused: boolean): void
    Description

    Use this method to set whether the carousel should be paused after a slide change.

  • Name
    setVisibleSlide(index: number): void;
    Description

    Use this method to set the visible slide of the carousel. The method takes a single argument, which is the index of the slide you want to set as visible.

  • Name
    setVisibleSlideIndex(index: number): void;
    Description

    Use this method to set the visible slide of the carousel. The method takes a single argument, which is the index of the slide you want to set as visible.

  • Name
    slideChangeCallback(callback: (arg: any) => void): void;
    Description

    Use this method to register a callback that will be called when the slide changes.

  • Name
    updated(): boolean;
    Description

    Use this method to check if the carousel is updated.

Textbox

Textboxes are used to display text in your creatives. They are added from the editor but you can edit them using the API.

  • Name
    updateShrink(): string
    Description

    Use this method to update the text element. Any changes to the text element will be reflected in the DOM.

  • Name
    updateContent(text: string): void
    Description

    Use this method to update the content of the textbox. The method takes a single argument, which is the content you want to update.

Was this page helpful?