Sign in | RegisterSign in | Register
Welcome to our guide to using widgets in Xara Web Designer, Xara Xtreme 5 and Xara Photo & Graphic Designer. We start with a brief intro on this page, including details on adding Placeholders. Then click the buttons at the top of this page and you'll find information on specific types of widgets. We have eleven initial categories, Photos, Videos, News, Maps, Music, Tracking Codes, RSS Feeds, Forms, Shopping Carts and (NEW) polls and search, which give information on adding some specific popular widgets in those categories. We will add more categories in future.

It's a simple process to insert your favorite video from YouTube into your own web page, or display the latest news from Reuters. Likewise, it's equally easy to insert your photo album from Picasa or Flickr, add a shop from Amazon, a contact form, or embed a Google Map.

'Widgets' is a collective term used to describe a third party service, which can be inserted into your own web page (another popular term for the same service is 'gadgets').

Inserting a widget in Xara Web Designer, Xtreme 5 or Xara Photo & Graphic Designer can be achieved in 3 simple steps:

1. Find the widget you wish to insert, customize the widget (if it's customizable of course) and copy the HTML code provided.
The most difficult part of adding a widget to your site is actually choosing which widgets to include in your web page! alone has over 117,000 widgets for example, Google has over 50,000 gadgets and there are other providers providing similar numbers.
2. Create a placeholder in Xara Web Designer or Xtreme 5.
The simplest way of creating a placeholder is to use the Rectangle tool. Select the Rectangle tool and draw a rectangle. Set the rectangle's width and height, and position it in your page where you'd like the widget to display. Most widgets are configurable and allow you set the size, look and feel of the widget. You should therefore ensure the placeholder is created to be the same width and height as the widget being inserted. Position the placeholder in your page where you wish the widget to appear. Apply Repel to the object by right clicking on it and selecting Repel Text Under.

Alternatively it's easy to use a screen print as a placeholder. Most widget providers will display a preview of their widgets. Simply take a screen print of the page with the preview. Most keyboards have a Print Screen button to capture the screen as a bitmap. Paste the bitmap (Ctrl + V), Select Bitmap and then Paste to paste the bitmap into Xara Web Designer or Xtreme. Select the Photo tool, click and drag around the part of the image previewing the widget in order to clip just the preview of the widget you're interested in. Position the screen print in your page where you'd like the widget to display. Apply Repel to the object by right clicking on it and selecting Repel Text Under.

Note: the placeholder is replaced by the HTML code when your web page is viewed in a web browser. Therefore, the only purpose of using a screen print as a placeholder is to show you exactly how your widget will be displayed in Web Designer or Xtreme.
3. Apply the HTML code copied from the widget provider to your placeholder.
Click on the website properties button, select the Placeholder tab and paste in your HTML code.

That's all there is to it!