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.

---

Carousel

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.

• NameanimateToSlide(index: number): voidDescription

  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.

• NameanimateToSlideIndex(index: number): voidDescription

  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.

• NamegetCarouselPlayUUID(): stringDescription

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

• NamegetElementDataSource(): stringDescription

  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.

• NamegetSlides(): Carousel Slide[]Description

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

• NamegetElementDataSource(): ElementDataSourceDescription

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

• NamegetVisibleSlideIndex(): numberDescription

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

• NamemoveToSlide(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.

• NamenextSlide(): 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.

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

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

• Namepause(): void;Description

  Use this method to pause the carousel.

• NamepreviousSlide(): voidDescription

  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.

• NameremoveSlide(index: number): voidDescription

  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.

• Namerendered(): booleanDescription

  Use this method to check if the carousel is rendered.

• Nameresume(): voidDescription

  Use this method to resume the carousel.

• NamesetPausedCarouselAfterSlideChange(paused: boolean): voidDescription

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

• NamesetVisibleSlide(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.

• NamesetVisibleSlideIndex(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.

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

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

• Nameupdated(): 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.

• NameupdateShrink(): stringDescription

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

• NameupdateContent(text: string): voidDescription

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

---