Get Started Lesson 3: Control and promotion spuds
Time to complete: approximately 30 minutes
Tip You can print a printer-friendly version of this lesson by choosing Print from your browser's File
menu. If you prefer to work with the lesson on-screen, it's probably easiest to have two browser windows open, one for the lesson content and the other for Trumba Connect.
In the previous lesson in this series, you learned how to publish a calendar and embed two spuds—a main calendar spud and a filter control spud—into a webpage.
In this lesson, we'll go a little deeper by looking more closely at control spuds and introducing a new spud type, promotion spuds. Here's what we'll cover:
Spuds: A definition and overview
Spuds are widgets that you embed in your website to provide visitors with customized views of event information. Spuds function like windows on your web pages. The event information visitors see in the windows comes directly from the Trumba servers where your event data is stored.
This means that information you update in one central place can be distributed in different ways in multiple locations. It also means that updates you make to your event information show up immediately everywhere a spud is embedded.
When you publish a calendar in Trumba® Connect, you automatically create a main calendar spud and a collection of control and promotion spuds. You can assemble and customize a specific group of spuds to display your event information in the way that best meets the needs of your site visitors.
Control spuds give site visitors control over which events they see and how the events are presented. Because control spuds control the events on the main calendar, you embed them into the same webpage where the main calendar spud is embedded.
The following image shows the hosted view of the Community Events calendar we published in Lesson 2. To the left of the calendar (surrounded by a red line) are two control spuds:
- View chooser spud.
- Filter spud.
Control spuds control the display and presentation of events.
In the remainder of this section, we'll step through the process of creating and customizing a view chooser spud.
Use a control spud to let calendar visitors choose views
When you publish a calendar, you have the option of choosing a default view and additional views. Views are different ways of displaying your events.
In Lesson 2, when we published the Community Events calendar, we chose Classic Table as the default view and 3 Columns as an additional view.
The following images show the differences between the two views.
Community Events calendar - Classic Table view
Community Events calendar - 3 Columns view
To let calendar visitors control how they view your events, include a view chooser control spud on the same page as your website calendar.
- Go to the Trumba Connect home page. Click Sign in to sign in to your Trumba account.
- Confirm that the Community Events calendar is listed under Current Publication and that the name of the calendar is bold and has a black check mark to the left of it.
- Click the blue Publish button.
Because the calendar is already published, you'll open the Publishing Control Panel.
- Click the Calendar Spuds tab, and then, in the top right corner, click Add a Calendar View.
- On the Add Calendar View page, select Compact List, and then click OK. On the Edit Settings page, click OK to accept the default settings.
Back on the Publishing Control Panel page, under Available Calendar Views, you should now see three calendar view boxes, Classic Table, 3 Columns, and Compact List.
- Click the Control Spuds tab, and then, in the upper right corner, click Add a Control Spud.
- On the Add Spud page, select View Chooser, and then click OK.
- On the Edit Settings page, for Label, replace the default text with Choose a view:, and then click OK.
On the Control Spuds tab, you should now see two control spud boxes, Filter (that you added in Lesson 2) and View Chooser.
- In the View Chooser window, at the bottom left, click Preview.
Previewing the view chooser spud
In the preview window, notice that the custom label you typed appears above the drop-down list. Expand the list to see that the three calendar views are listed. Close the preview window.
- To try out the view chooser spud, on the Publishing Control Panel page, click the Hosted View tab. At the bottom left of the Hosted View window, click Preview.
Use the view chooser spud to switch views and display the events in different ways. When you're finished experimenting, close the window.
Tip At the end of this lesson, we step through the process of embedding the view chooser spud code into a web page.
You use promotion spuds to promote events on pages of your website that do not contain the main calendar spud.
For example, suppose your organization has an event calendar on the Events page of its website. To increase visibility of your events and drive site visitors to the Events page, you might add a promotion spud to your home page.
Tip You can also promote your current day's or week's events on-site by customizing promotion spuds to create effective digital signage displays. Learn more.
Use spuds to tease site visitors with event information
Promotion spuds give you the opportunity to publicize your organization's events from pages throughout your website.
When site visitors click links in promotion spuds, they go to the web page that includes the full calendar. If you choose, visitors can also hover over an event description in a promotion spud to see an event details popup.
To get a sense for how promotion spuds work, interact with the following live example:
- Hover over an event description to see a popup.
- Click an event description or More... to see event details in the calendar.
- Click the link in the footer of the spud to see the full community events calendar.
Tip These events and the calendar may look slightly different from the events and calendar you created in Lesson 1. We added photos and notes to the events and made them recurring to better demonstrate how promotion spuds work.
Note: The images of Jonah and the Whale and tai chi are available for sharing under creative commons licenses.
Every promotion spud you create has a teaserBase property. This property lists the URL to which visitors will be directed when they click an event, title, or footer link in a promotion spud.
By default, the teaserBase URL points to the calendar page on the Trumba servers. For example, click the footer link in the promotion spud above. Notice the calendar page URL: http://www.trumba.com/calendars/community-events-demo.
This is the community events calendar page on the Trumba servers.
When you embed promotion spuds into your live site, you want to direct visitors to the calendar page on your own website not on the Trumba servers. To make this happen, all you have to do is replace the URL in each promotion spud's teaserBase property with the URL for your own calendar page.
The most efficient way to do this is to put your calendar page URL into the Calendar address field on the Publish Settings page. Then, each time you create a promotion spud, the calendar address URL automatically replaces the default value in the teaserBase property. We step through that process in the following procedure.
Tip Before you create and customize a promotion spud, confirm that the three events you added to your calendar in Lesson 1 are in the future. To change an event date, in the Trumba editing environment, on the calendar, click the event description. On the Edit page, under Start, set a future date within the next 60 days, and then click OK.
- On the Publishing Control Panel page, click the Publish Settings tab, and then click Edit Publish Settings.
Tip If you're not on the Publishing Control Panel page, go back to the procedure for adding a control spud, and follow the first three steps.
- On the Edit Publish Settings page, under Publish Settings, find the Calendar address field. This is where you type the URL for the calendar page on your website.
Note Since you're working through an example, you may not have a URL to type right now but you know where to find the field in the future. Later on, we'll customize an individual teaserBase property so you can see how it works.
- Click OK to return to the Publishing Control Panel page.
- Click the Promotion Spuds tab, and then click Add a Promotion Spud.
- On the Add Spud page, select Photo Upcoming, and then click OK.
Tip Whether or not you include photos with your events, the photo upcoming spud is one of the most versatile promotion spuds you can use. This spud gives you the option of selecting the fields that you want to include with each event.
- On the Edit Settings page, on the Settings tab, under Display Settings, you see the fields that will be listed for each event. To include one of the custom fields we created in Lesson 2, click [add new field], and then click Age Range.
- Under Paging, for Events Per Page, type 3.
- Under Display Options, for Footer calendar link label, replace See all with Visit our full calendar.
- Click the Styles tab. Under General, for Border size, type 2px. Under Description, change the font size to 9pt. Click OK.
- On the Promotion Spuds tab, in the Photo Upcoming box, at the bottom left, click Preview.
Previewing the photo upcoming spud
In the preview window, notice that the custom age range field we added and the custom footer link label we typed appear in the spud preview.
Tip Your promotion spud preview may not include photos like the preview here. To show off the full potential of this spud, we added images to our events. To learn more about images in publications, see Add images to events.
Tip To preview all of the calendar, control, and promotion spuds you've created and customized, click the Publish Settings tab, and then click Preview all Spuds.
Optional: Embed and test calendar, control, and promotion spuds
In Lesson 2, we stepped through the process of integrating the main calendar and filter control spud into a simple HTML page.
Now, we'll take that integration a little further and embed the view chooser spud in that same HTML page. We'll also create a new page where we embed and customize the photo upcoming spud.
For the purposes of this procedure, we'll call the calendar and control spuds page calendarpage.html. We'll call the promotion spuds page, promopage.html.
- Open calendarpage.html in a text or HTML editor.
- From the calendar page in your Trumba account, click Publish to open the Publishing Control Panel. Click the Control Spuds tab.
- In the View Chooser box, copy the spud code. Paste the code into the calendarpage.html page.
Tip At this point, you might want to contain the spud code in a table so that the main calendar, view chooser, and filter spuds look better on the page. For example, our code for calendarpage.html looks like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main calendar and control spuds test page</title>
<h1>Main calendar and control spuds</h1>
<table width=800 border=0 cellpadding=10 cellspacing=0>
spudType : "chooser" });
spudType : "filter" });
spudType : "main" });
<a href='http://www.trumba.com'>Events calendar powered by Trumba</a></noscript>
- In the Trumba Publishing Control Panel, click the Promotion Spuds tab.
- In the Upcoming Events box, copy the spud code. Paste the code into a new HTML page called promopage.html.
Tip The promotion spud with look better if you enclose it in a table with an assigned width of 300 pixels or so.
- To customize the code you just pasted so clicks on the promotion spud open calendarpage.html, replace the default URL in the teaserBase property with calendarpage.html.
spudType : "upcomingphoto" ,
teaserBase : "calendarpage.html" });
<a href='http://www.trumba.com'>Events calendar powered by Trumba</a></noscript>
- Open promopage.html in a browser. Click an event description or the link in the footer of the photo upcoming spud to go to the full calendar page.