When creating a branched widget, it's important to keep the user experience in mind. 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. With a well-designed and implemented branched widget, you can create a more engaging and interactive user experience that can help you gather valuable data and insights.
To do this, follow these steps.
Sign up if you don’t already have an account.
To create your first Tolstoy, you must create a Tolstoy account. On https://www.gotolstoy.com, you can click on Get Tolstoy for free to sign up.
Now, either follow the prompts and enter a password or Continue with Google. Follow the instructions and enter a secure password.
You can also create an account by navigating directly to the signup page at https://app.gotolstoy.com/signup.
Answering onboarding questions.
Let’s go ahead and make our first Tolstoy!
After creating an account, you will be directed to the onboarding page, which will ask you to tell us more about your company to customize your experience.
You can either choose Skip or Continue to keep answering the questions. Once done, you can click on Done or Create my first Tolstoy.
Make your Widget.
Click on Onsite
Choose where you want your widget to appear
Click on New Tolstoy > Widget > Branching
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!), importing from TikTok and Instagram, choosing from a variety of stock videos or ready-made templates.
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.
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.
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 on 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.
Navigate to the Design tab.
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 email@example.com if you have any more questions.