Embed a Widget

Widgets for your Google calendar, weather forecasts, photo slideshows, page counters, surveys, Twitter, etc. can be added to your SwimTopia website by embedding a bit of code in the HTML of a Text Area snippet. 

See examples below:

Free Countdown Timer

Step 1. Configure your preferred weather widget on http://www.timeanddate.com/clocks/freecountdown.html, follow the instructions to generate the code (make sure you choose the https version), and then copy this code to your clipboard.

Step 2. On your SwimTopia website Manage Site > Edit Page Content/Edit Template Content > Add Snippet, drag over a new Text Area snippet, click the "</>" (HTML) button on the right, paste in the code, and click the Create button.

Weather Underground Weather Stickers

Step 1. Configure your preferred weather widget on http://www.wunderground.com/stickers/, follow the instructions to generate the code, and then copy this code to your clipboard.

 

 

Step 2. On your SwimTopia website, drag over a new Text Area snippet, click the "</>" (HTML) button on the right, paste in the code, and click the Create button.

 

Done! Your Widget is now ready to view.

  

 

Google Calendar

You can embed your team's Google calendar on any page of your website. We recommend setting the page to the "full_width" template, as calendars can be wide and may get cut off if there is a sidebar template in the way.

From your Google Calendar > Calendar Settings, copy the "Embed code" starting with <iframe to your clipboard. 

Copy the contents of this field to your clipboard, and paste in a new Text Snippet on your SwimTopia site (see Step 2 above).  

Twitter Feed

Showing your Twitter feed on your SwimTopia site makes it easy to communicate timely news to your team.

You can quickly create a custom widget on Twitter's website to display your feed, and then embed it in a Text snippet. 

In your Twitter account, go to Settings > Widgets > Create New (https://twitter.com/settings/widgets/new) and click the Create Widget button (https://publish.twitter.com/).

Choose one of the options after entering the required information in the “What would you like to embed?” field (e.g., “@SwimTopia”), probably “Embedded Timeline.” 

Then click the “set customization options” link and use a reasonable height (500 pixels or so) and a width of 280 pixels if the widget will be in the sidebar. Click the “Update” button.

twitter_widget.png

 

Then click the “Copy Code” button and paste that into your Text Area Snippet on your SwimTopia site (see Step 2 above).  

SurveyMonkey Survey

Create your survey on the SurveyMonkey.com website. When you are done, select the Collect Responses option either from within the survey:

 

Or from your list of saved surveys:

Select the Website option in the Add a New Collector bar. 

 

Configure your widget by selecting Embed under Survey Type, and Support WordPress under Display Options, and then click Save.

Copy the contents of the Website Code field to your clipboard, and paste in a new Text Snippet on your SwimTopia site (see Step 2 above). 

 

Flickr Slideshow

From any public photo stream or album that you would like to embed, click on the photo that you want to appear as the "cover photo" for the embedded Album. 

Click the Share icon to open the Sharing menu. 

In the sharing menu, choose the HTML tab, select a size (I chose Medium here; you can set any size/dimensions in the HTML embed code later), and choose the Embed option. 

 

Copy the highlighted HTML embed code (starts with <iframe src="https://...) to your clipboard.

Paste the code into a new Text Snippet on your SwimTopia site (see Step 2 above).  

See this tutorial for more info on slideshows in Flickr. 

I've followed the instructions, but my widget won't load. What should I do? 

Some embedded <iframe> codes that contain links to insecure websites (i.e. "http://site.com") may not load within SwimTopia team websites, which are SSL-encrypted secure websites (i.e. "https://team.swimtopia.com"). See this tutorial for more information about security in SwimTopia team websites. 

Share your favorite Widgets by emailing them to help@swimtopia.com and we will post them to the Help Center.

Have more questions? Submit a request

1 Comments

  • 0
    Avatar
    Elsa Kayuha

    Very helpful - thanks!

Please sign in to leave a comment.
Powered by Zendesk