Integrate with your site

Read this if you want to place competition within your site or make it look like it was placed there.

You can place:

  • header of your site
  • footer of your site
  • single elements like logo, widgets, etc.
  • own campaign from ad server

It could be static (when the content doesn't change during competition) or dynamic (when it changes often).

Integration examples

What is integration? For end user it looks as if the competition microsite was within your portal: portal header and optionally footer are displayed, competition microsite between them.

All integration options are listed below, starting with most recommended:

1. Dynamic: files for head section, body, footer

Striped black area is for the contest microsite

Idea: use the same updated resources for your portal and for competition micro-site.

Result: up-to-date portal header and footer will be displayed. Expandable menu (if you have one) will work. Over the portal header leaderboard banners could be displayed as on your portal. They can have different sizes or be removed during competition.
For all micro-sites the same files would work well, so for next competition just copy previous settings in competizer admin.

How to prepare this: It's not that easy. Ask your webmaster or IT specialist to prepare special files. Files should be located and updated on your server. All we need is URLs of those files. They will be used during competition setup.

How to do this: Info in table below. Especially first option in the table applies.

2. Static: markup for head section, body, footer

Idea: use portal markup for microsite.

Result: Portal header and footer will be displayed. Expandable menu (if you have one) will work. Over the portal header leaderboard banners could be displayed as on your portal (if you use add server script). They can have different sizes or be removed during competition.
If your header changes often, then on microsite it won't change, unless it was also updated by hand. You can also rebuild your header a bit to make it looking stable with time (I mean don't put time depending or ageing items).
Well prepared (timeless) markup could be reused in other competitions.

How to prepare this: Just copy markup from your portal. But you have to know which part. Ask your webmaster or IT specialist for help. It will be used during competition setup.

How to do this: Info in table below. Especially second option in the table applies.
Optionally ask competizer team to help you with this.

3. Tricky: iframe solution for portal's header and footer

Idea: Easily prepare files for iframes, use the same updated resources for your portal and for competition microsite.

Result: Up-to-date portal header and footer will be displayed. But it's tricky because expandable menu will NOT work. And over the portal's header leaderboard banners CAN'T be displayed as on your news site (header can't change it's size).
For all micro-sites the same iframes would work well, so for next competition just copy previous settings in competizer admin.
If it's too difficult for your team to prepare dynamic files for iframes you could try to create static ones (I mean don't put time depending or ageing items).

How to do this: Prepare separate file with markup for header (logo, optionally main navigation). Another file for footer. Place it on your server. More info in table below. Iframes will be set during competition setup.
Optionally ask competizer team to help you with this.

4. Easy: Integrate some elements

 

Include your logo, graphic header or footer as separate elements.

 

5. Quick and dirty: Competition microsite in iframe 

 

Idea: Place competition microsite in iframe in your portal.

Result: Competition microsite displayed on one dedicated page of your website. But there are many disadvantages: iframe height will not addjust to competition page height, so make sure competition page height doesn't change too much; nevertheless allow scrollers. Furthermore using iframes prevents contestatns from sharing their entries and profile pages using separate internet address. It's also bad solution if you care about SEO.

How to prepare this:  Set up competition, remember about keeping all pages similiar height. Make sure that the width of competition microsite suits your portal.

How to do this: Create dedicated page in your portal and place iframe tag on it.

 

 

Note: Those options will always be available. They don't depend on integration.
  • use any domain name
  • add news site statistics tracker (count competition stats as part of own news site visits).
  • Add own ad tags (use own ad server).

 

 

  

Competizer Platform is the online contest software to create and manage Online Competitions.

More info at 

competizer.com

Integration tools

 

comparison of integration tools
What? Where to set it up? How?  When use this? Warnings
Files with:
  • head section of HTML document1
  • HTML that goes before competition within HTML body section (header, top navigation etc.)2
  • HTML that goes after competition within HTML body section (footer)3
Setup&edit > Look&Feel > Customize layout > External layout, auto update

set URLs to external files:

  • one for head section, 
  • second for body,
  • another for footer
When header or footer content changes often (dynamic markup) JS and CSS could overlap competizer assets, which could corrupt application
HTML markup for:
  • head section of HTML document with your META, JS, CSS references1
  • HTML that goes before competition within HTML body section (header, top navigation etc.)2
  • HTML that goes after competition within HTML body section (footer)3
Setup&edit > Look&Feel > Customize layout >
External layout, no auto update
 by direct input (HTML markup)  
When header and footer content doesn't change during competition (static markup)
 JS and CSS could overlap competizer assets, which could corrupt application
 Only some elements like header, top navigation, footer, widget etc.
 

Setup&edit > Main > Super header and super footer

Setup&edit > Options > Custom widgets
 

 by direct input (HTML markup); When header and footer content doesn't change during competition (static markup)  Use inline styles to format elements
 optionally iframe When header or footer content changes often (dynamic markup)  You have to set width and height of iframe so it can't fit changing content.
Iframe content won't stick out of iframe (i.e. expandable menu won't expand over iframe)
Ads from your ad server Setup&edit > Banners
  • optionally header and/or footer reference to load ad library,
  • single invocation scripts for given banner places
If you want to administrate all ad campaigns from your adserver. get more info about banners here

 

References

 1. Header of the page including <html> tag, without closing <head> tag.

Example:

<!DOCTYPE>
<html>
<head>
<script>...
<style>...
...

2. Body of the page including closing <head> tag and opening <body> tag.

Example:

</head>
<body>
...
...
<div>
<COMPETIZER CONTENT GOES HERE>

3.Footer of the page including closing <html> tag.

Example:

</div>
...
...
</body>
</html>