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 first 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 a widget?
When you log in to StorifyMe and navigate to Stories, you will see a tab named Widgets. Here you can create your widgets customize how the stories will be displayed to your web and app visitors and customize the 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 teammates 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 the widget - Tags provide details about the story and make it easy to locate related items that have the same tag. For 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 the widget name will look like: pick font size, color, padding and do you want the 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 shows multiple stories, while a Single story shows only one story. Below you'll see an example of the Carousel widget. The carousel widget is shaped as a square by default, but you can further style it by increasing the radius, border, etc.
The widget title is the text that is displayed below the Name. You can choose to show text or to leave only the 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 widgets and choose to embed the ones that currently fit your needs.
How to add the widget to your website?
To easily share the widget, you need to click on the sharing icon:
Once you click on the Share icon, there will be 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 the Widget Definition code, as shown below:
The 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 place this code in a place where you want a 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, please ping us in chat or contact us! ❤️