How to embed iAnn events in your website

The iAnn viewer has been designed to be integrated in other web applications. We have developed the viewer application using just JavaScript, CSS and HTML to make it compatible with any web technology. To be able to embed iAnn in you web application please follow these steps:

Copy CSS references into your HTML header

<link rel="stylesheet" type="text/css" href="http://iann.pro/viewer/css/itico.css" media="screen" />
<link rel='stylesheet' type='text/css' href='http://iann.pro/viewer/css/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='http://iann.pro/viewer/css/pagination.css' />
<link rel="stylesheet" href="http://iann.pro/viewer/ext/jquery.autocomplete.css" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />

Copy configuration options into your HTML header

<style type="text/css">
  h1.iann_title {display:none;} /* Do not display iAnn title */
  div#iann_wrap {width: 1000px; margin: 0px}  /* Set list width */
  div#iann_map {width: 1000px;}  /* Set map width */
  div#iann_calendar {width: 1000px;}  /* Set calendar width */
</style>    
<script type="text/javascript">
  //var iann_prefilter = 'country:"Switzerland"';
</script>

Copy JavaScript references into your HTML header

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" >loading='events';</script>
<script type="text/javascript" src="http://iann.pro/viewer/js/iticoJSLoader.js"></script>

Copy this HTML wherever you would like to display the event information

		<div id="iann_wrap">
			<div class="iann_top">
				<div id="result_tabs"></div>
				<br/>
				<h1 class="iann_title"><span class="iann_orange">i</span><span class="iann_brown">ann</span></h1>
				<div id="iann_search" class="iann_cell"></div>				
				<div id="iann_advance_fields" style="display:none;"></div>
				<div class="clear"></div>
			</div>
			<div id="iann_results" class="iann_bottom"></div>
		</div>  

If you would like to have a look at one example, please check the source code for this page: http://iann.pro/viewer/examples/basic/

In case you followed these steps and you do not see a list of events please have a look at "iAnn is not displaying events".