In this article we will cover the basics of creating a widget via the ReadyUp admin panel, this article will not go into specifics about how to integrate the widget onto any specific web platform.
- Log in to the ReadyUp Admin
- Select the Widgets option from the menu on the left side of the screen
- Click the Create New Widget button in the top left corner of the screen
- You should see a new screen that looks like the image below. You can configure your widget with the panel on the left side of the screen, and preview the events that will be displayed with it on the right.
The table below describes each widget field on the page and gives examples for what type of information could be added.
|Widget Name||Descriptive name for the widget, this is not displayed publicly||ReadyUp Event Widget|
Minisite - Display the full filter bar in the widget.
Event Listing - Only show event cards, no filter options.
|Widget Scroll Mode||
Infinite - Upon scrolling to the bottom of the widget more events cards will load
Paginate - Events are divided into pages with a navigation bar on the bottom of the widget
|Theme||Choose between a dark or a light overall theme for the widget.||N/A|
|Button Color||Choose what color the buttons in the widget will be. Use the color picker or input a HEX color value.||#000000|
|Button Hover Color||Choose what color the buttons in the widget will be when a user hovers their mouse over them. Use the color picker or input a HEX color value.||#000000|
|Link Color||Choose what color the text links in the widget will be. Use the color picker or input a HEX color value.||#000000|
|Font||Select what font will be used in the widget. Fonts are provided by Google Fonts.||N/A|
|Attribution Style||Select what style to display the ReadyUp logo in the widget.||N/A|
|Attribution Color||Choose between the standard ReadyUp logo colors or an all orange version.||N/A|
Select a date range to display events from.
All Upcoming - Will get all future events.
Range Select - Allows you to choose a specific date range.
|Genres||Select the Genres you want to display||MOBA|
|Games||Select the Games you want to display events in||League of Legends|
|Organizer||Select the Organizations whose events you want to display||Riot Games|
|Type||Select which types of events to display||Tournament|
|Platforms||Select which Platforms you want to display events from||Xbox|
|Language||Select what language the events you display should be in||English|
|Location Type||Select if you want to display online or onsite locations||Online|
|Participant||Select which participant you want to display events from||Cloud9|
|Widget Status||Activate/Deactivate the widget||N/A|
When you are finished click the "Create" button in the bottom right corner of the widget config area. The page should reload and you should be able to preview your widget in the preview area on the right-hand side of the screen.
Your Widget ID is displayed at the top of the page, the icon to the left of it will allow you to copy it to the clipboard for use with our Twitch Widget.
In order to get the code for the widget so it can be integrated into your website or platform scroll down to the "Website Code" section and you will see a screen that looks like this:
You can copy the code and use it to add the widget to your website.