Skip to main content

Abandonment Flows Offsite Widget in Klaviyo in the New Platform

​This guide outlines how to create, configure, and implement an Abandonment Flows off-site widget in Klaviyo

Joan Anonuevo avatar
Written by Joan Anonuevo
Updated this week

The Abandonment Flows off-site widget is a powerful new feature that allows you to dynamically populate videos based on product IDs featured in your email flows.

Getting Started

  1. Go to Surfaces

  2. Click Email & App

  3. Select Create Email & App Surface

  4. Choose Email Abandonment Flow

  5. Click Create Surface to begin

Note:
This feature is currently only available for Klaviyo users. Other email tools are not supported at this time

Selecting Videos

  1. By default, the Product Tagged Playlist will be selected.

  2. You'll see different groupings of videos based on product tags.

Design Settings - You can customize your emails and video experience

Design Settings

You can customize the look and behavior of the video experience inside the email.

Link Behavior

  • For Abandonment Flows, videos always redirect to the product page.

  • When clicked, the video opens directly on that product’s page.

UTM Parameters

  • You can add UTM parameters for tracking in tools like Google Analytics.

  • This allows you to track traffic coming from users who click the video/GIF in the email.

Important: After adding or editing UTM parameters, you must re-copy and paste the widget code.

Video Feed Settings

Auto-Open Video Feed

  • Toggle Auto-open video feed to control whether the video feed opens automatically.

Full Screen vs Picture-in-Picture

  1. Go to Video Feed

  2. Open Behavior

  3. Toggle View feed in full screen on or off, depending on your preference

Publishing Your Widget

In Tolstoy

  1. Copy the provided code snippet.

  2. There's no need to select your email tool, as it's only available for Klaviyo.


In Klaviyo

  1. Go to an email flow in Klaviyo.

  2. Edit one of the templates.

  3. Add the HTML code using either:

    • The source code for a block

    • Native HTML code implementation

Edit Template
Paste Code

Previewing Your Widget

  1. To preview, click on "Preview and Test" in Klaviyo.

  2. Since the widget dynamically populates videos, you can swipe through events to see different implementations for each product.

Preview GIF
Preview GIF

Did this answer your question?