How can I create a branched widget?

How to Create a branching Tolstoy

Niezl avatar
Written by Niezl
Updated over a week ago

When creating a branched widget, make sure that the widget is easy to use and navigate and that users can easily understand the branching logic and how to make their selections.

To do this, follow these steps.

Quick note: Video branching only works on branching widgets and embedded videos. It doesn't apply to feeds like swipeable widgets, stories, carousels, hero, and TV pages.

  1. Make your Widget.

    Click on Onsite -> Create Tolstoy

    Create from scratch

    Choose Widget -> Branching

  2. Choose where you want your widget to appear.

    Choose the video that you want to use from the video files

    Note: Options include creating an entirely new recorded video, recording your screen, uploading a video file from your computer, choosing a video from your files (this will be empty when you make your first Tolstoy!), and importing from TikTok and Instagram.

  3. Add question and response options using the Custom buttons!

    Once you are happy with the first video part, it’s time to add some text and options for the user to interact with Tolstoy using the Custom buttons.

    Under the Question section, type the question (if anything) you want to display. Then, add some choices for the user to select from.

    Here is an example of a filled-out question with choices.

  4. Choose what type of response each choice should prompt.

    The + of the choices section indicates what action each choice corresponds to.

    Each option provides the user with a different way to interact with Tolstoy.

    Free text prompts the user to enter the text that will be sent to the Tolstoy creator.
    Video response prompts the user to record a response video.
    Audio response prompts the user to record an audio response.
    Calendar allows the user to set a meeting time with the Tolstoy creator.

    Contact form asks for some user information such as email address, name, etc.

    Image response prompts the user to upload a file/document from their computer or mobile
    Promo code gives the user a promo code they get as a reward for watching the Tolstoy.

    Alternatively, you can also use Default buttons if you're only planning to collect video, audio, or text responses from your viewers. It's important to know that the default buttons come as a set. When you choose them, all three buttons will show up together, and you can't use them separately.

  5. It's time to add parts to your Tolstoy (you need more than one part to make a branching Tolstoy). To add the next part of the Tolstoy, simply press Add new part.
    Create however many more parts you want by adding a new part, recording or choosing a video, and adding questions and choices.

    Your Tolstoy will then look something like this:

Make branching between the different parts - you need to set the links between choices and different parts.

Depending on what the user chooses, they can potentially be brought to different parts of the Tolstoy.

For example, if the user chooses ages Okay, they should be redirected to the Learn More video, which is part 2. If the user chooses Pass, they should be redirected to the end, and so forth.

To establish the different connections, click the dropdown on the right side of each part and choose where the user should be redirected.

This is how the Tolstoy will look after setting up the connections.

That’s it! Now, depending on which choices a user chooses, they will be sent to different parts of the Tolstoy.

How to Customize Your Tolstoy Widget

We are constantly working on expanding the customization options for our clients so that all widgets can seamlessly blend into every site's aesthetic. Let's explore our current options.

  1. Navigate to the Design tab.

  2. Go to the Widget subsection.

    Shape - You can make your widget a circle, which can also be changed in size. You can also make it a rectangle

    Size - You can choose among small, medium, and large
    Appy shape and size to mobile - This lets you change the size and shape of elements like buttons or pictures so they look good on mobile devices
    Position - You can decide whether you want the widget to appear on the left or right side of the page
    Margin bottom - This is the space between the bottom of an element and the next one below it
    Margin right - This is the space between the right edge of an element and the next one to the right of it
    Video Alignment - This lets you position a video of your widget either horizontally or vertically
    Border - If you want, you can add a border to your widget and change its color.
    Caption- Here, you can add a text that will appear on the widget before the user clicks on it. You can also add Emojis! 🤓
    Caption location - This lets you choose where to put the text that goes with an image or video, like above, below, or beside it.
    Theme color - this will be the color of the border and the text bubble if you choose to add them.
    Animation - this lets you choose different animation styles for your widget.

    Slide from - the widget entrance slides from the side or from the bottom.

    Auto-open widget - automatically opens and displays the widget without requiring the user to click it.
    Notification badge - will give your widget a notification badge before it's been opened.
    Text bubble - if you want to draw more attention to your widget, you can add a chat bubble near it with a text of your choice.

    Bubble text - the text on the text bubble.
    Text color - that will be the color of the text on your widget and the text bubble.

    Widget Vs. Embed

    A widget will appear "over top" of the site - it will remain static in its position even when the user scrolls, and it expands only when clicked. It can also be customized.

    Here is an example of a Tolstoy widget:

    An embedded Tolstoy is embedded into your very website. It is "attached" to the site, and will not follow the viewer while scrolling. Here is an example of an embedded Tolstoy:

    Learn more about Tolstoy Widgets:

    Do not hesitate to contact us at if you have any more questions.

Did this answer your question?