Once you have completed the registration process required to set up a SquaredOut widget you will be directed to the widget creation dashboard. This is the central location where you control your widgets. You can create, design, and delete widgets, assign admins, or change your account settings all from this location.
Since this is the first time your creating a widget, the add a new widget screen will popup.
Add A New Widget
Enter your widget’s name, and press the Add A Widget button.
Once added, you will now see the Widget Design Process title at the top of the page will have your new widget name.
Your Widget Name
The next step moving forward is deciding to create a new calendar or use an existing one. For those of you who are new to SquaredOut, select create a new calendar. If you have already created a calendar using SquaredOut, feel free to select an existing calendar.
Add A New Calendar or Select An Existing One
Once selected a popup will display asking you to create a new calendar. Name your calendar and press Add A Calendar.
Add A Calendar
Once added, you will see that your calendar is now linked to your widget.
If you selected to choose from an existing calendar, the popup will display a drop down of your existing calendars. Once selected it will be linked to your widget.
Select An Existing Calendar
Note: You can link multiple calendars to a single widget depending upon which widget package you purchased.
Moving on to step 2, you will see you have two choices to select from. You can create a widget for your website, facebook page, or both. For this demonstration we are going to create a widget for your website, so select Website Widget. Click next to go to step 3.
Create A Widget for A Website or Facebook
For step 3 you need to add the URL where you are going to be hosting your widget.
Enter A Website URL
Ex: http://www.yourwebsitegoeshere.com. Note: Depending on your package selection, you can add multiple URL locations to this widget.
Click on the Add A New Website button and you will see a popup display. Type in your website, and click save.
Enter A Website URL and Click Save
Once you have clicked save you will now see that the website you have entered is now linked to this widget.
Click next to go to step 4 the design process.
This is the fun part. This is where you get to choose a widget design, and color it to fit your branding. There are four types of widgets to choose from. Calendar Widget, List View Widget, Multi-Event Widget, and Single-Event Widget.
To help you decide which widget to choose from, we are going to break down each widget type. They are as follows:
Calendar Widget – The Calendar Widget is your basic month view. All events are displayed in month view, and you can cycle between month and list views with month view being the primary view.
Preview of Calendar Widget
List View Widget – The List View Widget displays all events in a list view. You can cycle between month and list views with list view being the primary view.
Preview of List View Widget
Multi-Event Widget – The Multi-Event View Widget displays multiple events at one time. You can choose from some of our advanced display widgets such as our hover widget, flip widget or ticker widgets.
Preview of Multi-Event Widget
Single-Event Widget – The Single-Event View Widget displays a single event at any given time. You can choose from two advanced display widgets, the flip widget, and hover widget. You can also cycle through events by clicking on any of the arrows on the widget.
Preview of Single_Event Widget
Select the widget type you would like to create.
Once selected let’s move on to our next category Event Format. All widget types have the category Event Format except the Single-Event Widget. This is because the Single-Event Widgets are an all-in-one event where you don’t need to clarify how you are going to view more information about an event. For all other widget types, we need to clarify how to display more information should someone click on the event for more information.
The Event Format types are as follows:
Popout – Your standard popout that displays more information.
Popout Tall – A taller version of the popout.
Read Event – A large read event view that displays more information.
Read Event Medium – A medium sized read event view.
Read Event Small – A small sized read event view.
Select An Event Format
Select a format that is to your liking.
The next section is list view type or view type depending on which widget type you selected. If you selected Single-Event Widget, you won’t have this option. The list view type is exactly what is sounds like, the type of list view you would like to display. They are as follows:
List View – This is your standard list view, which displays basic information such as photo, description, date, time, and location.
List View No Description – This view has no description just image, date, time, and social features.
List View Small – This view is a smaller version of your basic list view built for sidebars.
List View Text – This view is just a text version of the list view with no images.
List View Wide – This view is called list view wide because it takes up more space, but includes both a map as well as larger social features.
Select A List View Type
If you have selected the Multi-Event View Widget you will have to select from a view type. The view types are as follow:
Boxes 2 x 2 – 2 boxes in 2 rows with single event in each box. Each box on hover displays more information.
Boxes 4 x 4 – 4 boxes in 4 rows with single event in each box. Each box on hover displays more information.
Boxes 5 x 5 – 5 boxes in 5 rows with single event in each box. Each box on hover displays more information.
Boxes Small – Small version of the boxes.
Event Ticker Large – Large ticker that animates events across your page.
Event Ticker Small – Small ticker that animates events across your page.
Flip Boxes 3 x 7 – All in one box that tells you all the info you need to know. On click of more button, box flips to display more info on the back of it.
Hover Boxes 2 x 4 – Larger boxes that are displayed in 2 columns, and 4 rows.
Select A View Type
If you selected the calendar widget type, you will see a dropbox where you can select a calendar view. This view is the standard view that will display on your widget. Most people choose month view.
Select A Primary View
For both the calendar and list view widget types you will see a section for your calendar bar. The calendar bar is a great feature for those of you who would like to add multiple calendars to a single widget. When you select this option, your calendar bar will display on the lefthand side of your widget. The benefit to this is people who view your widget can select which calendar to display. They can toggle on or off the calendars they like, and the events associated with that calendar will update accordingly. You can also add a link to the location where your website logo is on the web, and this will be added to your cal bar thus branding your cal bar. If you want to display this check show.
Add A Calendar Bar
If you are creating a calendar type widget you have one more option to select from and that is View Buttons. View buttons are the location where you can turn on which views will be displayed on your calendar widget. Simply check or uncheck the views you would like to be displayed on your widget, and your widget will update accordingly.
Select Which Views Will Be On Your Widget
The next few sections are included on all widget types. The first section being Widget Size. To make choosing a widget size easier for you we have created three sizes. Those sizes are small, medium, and large. If those sizes don’t work for you, feel free to enter your own custom dimensions for your widget.
Select A Widget Size or Create A Custom One
In the next section down you can start customizing the look and feel of your widget to fit your brand. The Heading Colors section is the section of the widget where the date, views, date selector and arrows go. You can enter either a custom color code using the RGB color code which is displayed as #ffffff (white) or you can select from our presets dropdown menu.
The section below Heading Colors is Day of the Week Colors. This is the section where the days of the week will display. Enter your custom color or select from the presets dropdown.
Select Your Heading and Day of the Week Colors
The MOST IMPORTANT part of this whole process is this next part Updating Your Settings. Whenever you make any changes to your widget you have to click Update Settings. If you don’t and click on either next or back, all of the changes you made will be lost. You will know when your changes have been accepted when the word Updated displays at the top of the widget steps.
Click Update Settings To Save Your Settings
Once your widget type is chosen, and you have selected all of your formatting and branded your calendar, click on the next button to preview your widget. On the Preview Widget tab, which is step 5, you will see a preview of your widget. To see a full page preview of your widget click on the Preview Widget button, and a popup will display the actual size of your widget. If you wish to make changes to your widget simply click back or click on step 4, make your changes, click update settings, and next to preview your changes.
Preview Your Widget
Once your happy with how your widget looks, click on step 6 or on next.
Step 6 is where we generate the code needed to add your widget to your website. What you need to do is copy the iFrame code on step 6, and paste this code into the location of your site where you want your widget to display.
Pasted Code Into Website
This is what your pasted code should look like. Note: For some of you who aren’t familiar with html coding, you may need to have a web designer paste the code into the location you want your widget to go. Once they add the code into your site, you wont need them to re-paste the code if you make changes unless you change the size of your widget.
Finished Widget On Website
That’s it. Once the code is on your website your widget is up and running.
This takes us to step 7, adding events to your calendar widget.
Now that your widget is up on your site its time to add some events. In step 7 you can choose to either add events individually or import them from an existing calendar such as your Google, Yahoo, iCal, or Outlook calendars.
Add Events To Your Widget
This brings us to the end of this tutorial. If you are having any problems completing this tutorial please feel free to contact support at email@example.com.