What is a widget?
A widget is an element of a graphical user interface (GUI) that displays information or provides a specific way for a user to interact with the operating system or an application. In a nutshell, it's a code snippet that can be embedded everywhere.
Why do I need a widget?
If you want stories to appear on your website or your app, you will firdt need to create a widget. In StorifyMe, we call widgets story players - because that's exactly what they are. You can have multiple widgets on your website or within your app, on any placement you choose.
How to create widget?
When you log in into StorifyMe, and navigate to Stories, you will see a tab named Widgets. In here you can create your widgets and customize how the stories will be displayed to your web and app visitors and customize overall look of the stories section on your page.
Creating a new widget is quite simple, and you can create as many widgets as you want with different look and feel.
To create one, navigate to Stories - Widgets and click on +Create widget.
First, you'll need to name your widget. You should name your widget so other team mates understand what kind of stories the widget will contain.
Next, you'll be redirected to the widget editor, where you can further customize your widget. We will go over everything you can do.
Stories
Your first step in customization is setting up tags for widget - Tags provide details about the story and make it easy to locate related items that have the same tag. In example, you can choose to show only stories with tags that are currently relevant to your offer, and not show the ones with products that are out of stock or similar.
Order by - Here you can choose how you want your stories to be shown within a widget: order by published stories new to old or old to new, Story updated old to new or new to old, or by story name, alphabetically.
Style Your Widget
Background - Pick a background color of your widget and customize the size of it.
Widget Title - Customize how widget name will look like: pick font size, color, padding and do you want Widget name to be centralized, left or right-aligned.
Widget Border - choose the border width, color and radius.
Configuration - Widget settings
Widget Type - We offer two different types of widgets: Carousel and a Single Story. Carousel show multiple stories, while Single story is showing only one story. Below you'll see an example of the Carousel widget. Carousel widget is shaped as a square by default, but you can further style it by increasing radius, border etc.
Widget title is text that is displayed below Name. You can choose to show text or to leave only name. Tip: This section can be used to attract customers to watch your stories so you can get them in the loop for making a purchase at the end.
Widget example
Once you created a widget you can easily edit, delete or share. Also, you can create new different types of widget and choose to embed the ones that currently fit your needs.
How to add widget to your website?
To easily share widget, you need to click on the sharing icon:
Once you click on the Share icon, there will be a two pieces of code displayed, like in the example below.
If you're adding widgets for the first time, you would first need to add Widget Definition code, like shown below:
Widget definition code is added ONLY ONCE and is the same for all widgets you create under the same account.
Once the widget definition code is added you can add widget embed code, that is unique to each widget and has to be added with every new widget you create.
All you need to do is to place this code in a place where you want widget with stories to show up. If you are not sure how to do this, we'll be happy to help you!
The code will stay the same no matter the edits you make to an already created widget.
If you have any other questions regarding Widget configuration, feel free to ping us in chat or contact us! ❤️