Spots in TwentyThree offer a flexible way to seamlessly integrate videos into websites. By embedding a Spot code once, you can reuse and update it across platforms, allowing teams to share or replace videos quickly. This article covers the eight types of Spots, their unique applications, and customization options.
To create a Spot:
The Single Spot type is perfect for showcasing a single video. You can choose whether the title appears inside, outside, or not at all. Playback options include playing the video in a pop-up, directly in the embed, or redirecting viewers to the Video Section. For added functionality, you can enable A/B Testing by selecting multiple videos for the Spot. This feature randomizes the videos displayed and collects performance statistics, helping you determine which video resonates best with your audience.
Here a preview of how a single spot would look like on a page:
A/B Testing lets you compare multiple videos by rotating them in a single Spot. The platform collects and shows performance statistics, enabling you to determine which video resonates best with your audience.
For a Thumbnail Spot, you can select the number of videos and layout in addition to playback and style. Choose between 2 and 20 videos to display in a grid, list, or row. Once all videos are selected, you can sort them in the desired order.
The Showcase Spot uses a grid layout with varying video sizes. This type works best with at least five videos to create a visually balanced display. It can be used for example to present event highlights in a creative format to engage your audience on a landing page.
This Spot places a small video window on the page, allowing it to remain visible as users scroll. The window's position can be customized with CSS
Ambient Spots integrate videos as part of a immersive website background or activate them through user interactions like scroll, hover, or loop. It can be used as a looping welcome video as a dynamic background for your homepage.
The Carousel Spot showcases a collection of videos in a horizontal slider. Thumbnails for upcoming videos are visible, providing a preview of what’s next. As users scroll through the carousel, an animation shifts the videos across the screen while simultaneously updating the descriptions. Playback can happen inside the container, in a pop-up window or by redirecting to the Video Section. It can be used to showcase customer testimonials in a horizontal slider on a product page.
The Gallery Spot organizes related videos into a contained category, with one primary video displayed at the top and additional videos below. Users can browse the collection using arrows to navigate through the list, selecting specific videos to play. Use a Gallery Spot for a training portal, with the main video acting as an introduction and others covering specific topics.
Vertical Message is a variant of Picture-in-Picture, tailored for vertical videos. It enlarges the video on the side of the screen to emphasize the content and allows interaction points, such as clickable links or calls-to-action, to appear within the video. Use Vertical Message for a mobile-friendly campaign where the video highlights product features and includes an interactive "Buy Now" button.
Once the Spot is created, click on "Copy Spot code" to copy the HTML code to your clipboard, which can then be pasted onto your website. After embedding the Spot, you can edit it through the spot editing function without needing to change the code.
There are two ways to edit a Spot. The first method is through the TwentyThree platform. Select the Spot you want to edit by clicking on its tiles or videos. This opens a menu where you can modify, deactivate, or delete the Spot. To adjust its configuration or design, click the "Configure" button, which reopens the setup options for the Spot.
The second method is directly on the website where the Spot is embedded. When logged into your TwentyThree account, a round green button will appear on the embedded Spot. Clicking this button opens a pop-up editor, allowing you to modify the Spot’s videos without leaving the webpage.
After creating a Spot, you can further customize it by clicking on “configure.” Through CSS, JavaScript, and Liquid, you can edit specific parts of the code. Each Spot has its own ID, enabling customization to a specific Spot according to your preferences. Remember, only Admins can access to Customization settings.
