Embed spuds

You can easily integrate your Trumba® calendar spuds into your website. In your Trumba account, you configure the spuds the way you want them. Trumba Connect generates code, which you then paste into your web page to display the customized spud.

The default code for an individual spud looks like this, where name is the web name of your calendar and type is the name of the spud you choose to embed:

Important You also need to embed the spud controller script just before the first spud on your page:

What are calendar spuds and why would I want to do this?

Topic links

The following sections contain instructions and guidelines for embedding calendar spuds.

• Requirements for embedding calendar spuds
• Embed a calendar spud
• Use spudId to improve page load time
• Tips for optimizing the display of calendar spuds

Requirements for embedding calendar spuds

• You can embed spuds from published calendars only.

  I haven't published my calendar yet.

• You need to know the web name of your published calendar. To find it, display the calendar in your Trumba account, and then click Calendar Settings.
• You must have editing access to your webpages and be familiar enough with HTML to find the location on your site where you want a calendar, date finder, or other spud.

Embed a calendar spud

1. In your Trumba account, display the calendar you published, and then click Publish Settings to display the Publishing Control Panel.

   If you haven't published your calendar yet, go through the publishing settings, and then click OK. The Publishing Control Panel appears after you publish the calendar. More information about the publishing settings…

2. In an HTML or text editor, open the web page into which you want to embed the spud so that you can edit the code.
3. Back in the Publishing Control Panel for your Trumba calendar, click in the code for the spud you want to embed to select it. Copy the code and paste it into your webpage's HTML code where you want the spud to appear.

   To embed spuds in a page, you need two sections of code:

   • One time per page, just before the first spud on the page, you need to paste the script that controls communication among spuds on the page and between spuds and your source calendar data:
     <script type="text/javascript" src="https://www.qatrumba.com/scripts/spuds.js"></script>

     Note Although you should use this script only once, it appears with all spuds, because any of the spuds could be the only spud on your page. For the second or subsequent spuds on a page, do not copy this part of the code from the Publishing Control Panel.

   • The code for the spud itself. Here's the default code, where name is the web name of your calendar and type is the type of spud you want to embed:
     <script type="text/javascript">
     $Trumba.addSpud(
     { webName: "name",
       spudType: "type"});
     </script>

4. (Optional but recommended) If you embed a promotion spud that includes the teaserBase argument, such as an Upcoming Events list or crawler, replace the URL to your hosted calendar page with the URL of the web page where you embedded your main calendar spud.

   That way, when visitors click an event in the promotion spud, they are directed to the main calendar on your website instead of off of your site to your hosted calendar on the Trumba Connect site.

   The $Trumba.addSpud method then looks like this, where you replace the placeholder text with the appropriate values:

   $Trumba.addSpud(
   { webName: "name",
     spudType: "type",
     teaserBase: "URL of the page that contains your main calendar spud" });
5. Save and close your web page file, and then view the page in the web browser to see your embedded calendar spud.

   If the calendar spud doesn't display the way you want it, see Tips below.

Use spudId to improve page load time

The default spud script provided in the Publishing Control Panel places the spud at the location where you paste the script. To improve page performance, especially when embedding promotion spuds on your home page, you can place the spud script at the end of the page and edit the script to reference the location where the spud should be placed using the spudId parameter. This allows the spuds.js library to be loaded after the main portion of the page so visitors see other content more quickly.

The sample code below uses this approach to embed search and main calendar spuds into a web page. The two div elements can be placed anywhere on your page where the spuds should be placed.

Learn more about the $Trumba.addSpud() method

Show me a working example

Tips for optimizing the display of calendar spuds

You can find additional tips in the Spud FAQ.

• Main calendar spuds have minimum width requirements, which vary according to the default view you select. The List and Classic Day views have relatively small width requirements, and the Classic Month, Classic Multi-Week, Classic Table, and Classic multi-day views have larger width requirements.

How can I put the calendar into a narrower space?

• Information at the top of the calendar, such as the date range displayed, will wrap if your web page is narrow. In addition, the calendar won't display properly if the allocated width is too narrow. To solve the problem, you can either increase the allocated width or republish the calendar using a different template.
• The date finder, mix-in, and upcoming events spuds stretch to fill the width that is defined in the HTML page. These spuds look their best if you place them into a div with a width of 175 to 200 pixels.

  For example:

  <div style="width:200px;">
spud code from publishing wizard goes here
</div>