Welcome Guest [Log In] [Register]
Add GW2Timer to your website
Topic Started: Monday, 14. July 2014, 14:29 (9,076 Views)
Drant
Member Avatar

If you got 360 horizontal pixels and some vertical to spare, then you can add the iconic world boss clock to your guild website! Here are the live previews of embedding GW2Timer.com via iframe tag. If your website uses HTTPS and the embed does not work, try changing the src from http://gw2timer.com to https://gw2timer.com
Language Codes
Code:
 
enu_Language=en (English)
enu_Language=de (Deutsch)
enu_Language=es (Español)
enu_Language=fr (Français)
enu_Language=cs (Čeština)
enu_Language=it (Italiano)
enu_Language=pl (Polski)
enu_Language=pt (Português)
enu_Language=ru (Русский)
enu_Language=tw (繁體中文)
enu_Language=zh (简体中文)

Examples
Be sure to change the enu_Language parameter to your desired language. For the examples below, "scalable size" means you can change the width and height values to whatever you want; however, if it says "fixed width" or "fixed height" then those respective properties shouldn't be changed or else the window may look cropped.


Timeline (scalable width, fixed height)
Code: HTML
 
<iframe src="http://gw2timer.com/?mode=Overlay&enu_Language=en&bol_opaqueTimeline=true&bol_showCoordinatesBar=false&bol_showPanel=false" width="1024" height="192" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image
Each row is 24 pixels tall, so subtract that from the height to hide lines.


Tile Mode (scalable size)
Code: HTML
 
<iframe src="http://gw2timer.com/?mode=Tile&enu_Language=en" width="200" height="420" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image


Mini-Clock (fixed size)
Code: HTML
 
<iframe src="http://gw2timer.com/?int_setClock=2&int_setDimming=2" width="360" height="85" seamless="seamless" scrolling="no" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image


Compact Clock (fixed size)
Code: HTML
 
<iframe src="http://gw2timer.com/?int_setClock=0&int_setDimming=1" width="360" height="220" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image


Timers List (scalable height, fixed width)
Code: HTML
 
<iframe src="http://gw2timer.com/?int_setClock=3&bol_expandWB=false&enu_Language=en" width="360" height="580" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image


Mini-Clock and Timetable combo (scalable height, fixed width)
Code: HTML
 
<iframe src="http://gw2timer.com/?page=Timetable&enu_Language=fr&int_setClock=2&bol_use24Hour=true" width="360" height="580" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image


Guild Missions window (scalable size)
Code: HTML
 
<iframe src="http://gw2timer.com/?page=Guild&enu_Language=de&int_setClock=3" width="1080" height="580" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image


Resource Nodes window (scalable size)
Code: HTML
 
<iframe src="http://gw2timer.com/?page=Resource&enu_Language=es&bol_showPanel=false" width="720" height="580" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image


Simple Mode (fixed image)
Code: HTML
 
<iframe src="http://gw2timer.com/?mode=Simple&enu_Language=en" width="720" height="720" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image


Mobile Mode (scalable height, fixed width)
Code: HTML
 
<iframe src="http://gw2timer.com/?mode=Mobile&int_setClock=3&bol_expandWB=false&enu_Language=en" width="400" height="580" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image

Alternatively, you can write your own code easily if you know a little HTML and CSS:
Code: HTML
 
<iframe src="http://gw2timer.com/?int_setClock=2" width="360" height="85" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Boiling those formatting down to the essentials, you have the site's URL, the iframe's width and height.
Code: HTML
 
<iframe src="http://gw2timer.com/" width="360" height="85"></iframe>

The "seamless" attribute is for removing the default HTML border, and the "style" is for making the embedded box prettier. You can add query strings to the URL, allowing you to customize the embedded app as if you were using it normally.

src Example:
Code:
 
http://gw2timer.com/?int_setClock=2&bol_expandWB=false&enu_Language=fr

Adding that as an URL to your iframe, the embedded GW2Timer will show the bar clock, not auto-expand the World Boss chain bars, and set the language to French. Note the formatting of the query string:
Code:
 
?key=value&key=value&key=value...

Keys and Values are separated by an equal sign (=), and the pairs are separated by ampersands (&). Note that the beginning of the query string must start with a question mark (?)



Options
Here is a full list of current options you can change as seen in the Options page. Note that str_ and int_num options cannot be overriden.
Code:
 
enu_Language: "en",
enu_Server: "1008",
// Timer
bol_showSecondHand: true,
bol_hideChecked: false,
bol_expandWB: true,
bol_collapseChains: true,
int_setClock: 0,
int_setDimming: 0,
int_setPredictor: 0,
// Panel
bol_alignPanelRight: true,
bol_ignoreTouch: false,
bol_showPanel: true,
bol_showMap: true,
bol_showHUD: true,
bol_showHUDWvW: true,
bol_showDashboard: true,
bol_showTimeline: true,
bol_opaqueTimeline: false,
bol_condenseTimelineLine: true,
bol_condenseTimelineHeader: true,
bol_hideHUD: true,
// Map
int_setFloor: 1,
int_setFloorWvW: 1,
int_setInitialZoom: 3,
int_setInitialZoomWvW: 4,
bol_showCoordinatesBar: true,
bol_showZoneBorders: false,
bol_showZoneGateways: false,
bol_showPersonalPaths: true,
bol_showChainPaths: true,
bol_tourPrediction: true,
bol_showWorldCompletion: false,
bol_showZoneOverview: true,
bol_displaySectors: true,
bol_displayWaypoints: true,
bol_displayPOIs: true,
bol_displayVistas: true,
bol_displayChallenges: true,
bol_displayMasteries: true,
bol_displayHearts: true,
bol_displayHeartsArea: false,
bol_displaySectorsArea: false,
bol_displayEvents: false,
bol_showWorldCompletionWvW: false,
bol_showZoneOverviewWvW: true,
bol_displaySectorsWvW: true,
bol_displayWaypointsWvW: true,
bol_displayPOIsWvW: true,
bol_displayVistasWvW: true,
bol_displayChallengesWvW: true,
str_colorPersonalPath: "#ffffff",
// WvW
int_secWvWRefresh: 10,
int_numLogEntries: 128,
bol_showLog: true,
bol_opaqueLog: false,
bol_maximizeLog: false,
bol_logRedHome: true,
bol_logBlueHome: true,
bol_logGreenHome: true,
bol_logCenter: true,
bol_logNarrate: false,
bol_narrateRedHome: true,
bol_narrateBlueHome: true,
bol_narrateGreenHome: true,
bol_narrateCenter: true,
bol_narrateClaimed: false,
bol_narrateRuins: false,
bol_narrateCamp: true,
bol_narrateTower: true,
bol_narrateKeep: true,
bol_narrateCastle: true,
bol_showLeaderboard: true,
bol_opaqueLeaderboard: false,
bol_condenseLeaderboard: false,
bol_showDestructibles: false,
bol_showObjectiveLabels: true,
bol_showSecondaries: false,
// GPS
int_setFollow: 1,
bol_displayCharacter: true,
int_setFollowWvW: 2,
bol_displayCharacterWvW: true,
int_msecGPSRefresh: 50,
// Alarm
int_setAlarm: 0,
int_setVolume: 75,
bol_alertArrival: true,
bol_alertAtStart: true,
bol_alertAtEnd: true,
bol_alertChecked: false,
int_alertSubscribedFirst: 1,
int_alertSubscribedSecond: 15,
bol_alertAutosubscribe: true,
bol_alertUnsubscribe: true,
bol_alertBuild: false,
bol_alertDaylight: false,
bol_alertMystic: false,
// Account
bol_showRarity: false,
bol_condenseBank: false,
bol_auditTransactions: true,
bol_auditVault: true,
bol_auditAccountOnReset: false,
bol_auditHistoryConverted: false,
int_numAuditReports: 1024,
// Trading
bol_refreshPrices: true,
int_numTradingCalculators: 25,
int_numTradingResults: 50,
int_secTradingRefresh: 60,
// Tools
int_minStopwatchAlert: 5,
str_textStopwatchAlert: "Alert, alert, alert!",
int_sizeStopwatchFont: 64,
int_sizeNotepadFont: 12,
int_sizeNotepadHeight: 400,
// Daily
bol_clearChainChecklistOnReset: true,
bol_clearPersonalChecklistOnReset: true,
int_numChecklistDaily: 12,
int_numChecklistWeekly: 12,
// Advanced
bol_use24Hour: true,
bol_detectDST: true,
bol_useSiteTag: true


Some of the int_ options correspond to radio button fieldsets in the Options page, where 0 means the topmost option. For example, the "Clock Pane" set of radio buttons has the options:
Compact (choice 0)
Full (choice 1)
Bar (choice 2)
None (choice 3)
So if you want to not show the clock, you use the src http://gw2timer.com/?int_setClock=3
For dimming options:
Autodim (choice 0)
Bright (choice 1)
Dark (choice 2)
So if you want a dark clock background, you use the src http://gw2timer.com/?int_setDimming=2



If you need more help on embedding, you can post as an unregistered guest in this thread.
Offline Profile Quote Post Goto Top
 
Drant
Member Avatar

If you're a WvW oriented guild, you may want to embed the WvW live map and scoreboard.
For the URL src below, remember to change the enu_Server value to your own server, and the enu_Language value if you prefer languages other than English.

Server Number
Code:
 
AnvilRock: "1001",
BorlisPass: "1002",
YaksBend: "1003",
HengeofDenravi: "1004",
Maguuma: "1005",
SorrowsFurnace: "1006",
GateofMadness: "1007",
JadeQuarry: "1008",
FortAspenwood: "1009",
EhmryBay: "1010",
StormbluffIsle: "1011",
Darkhaven: "1012",
SanctumofRall: "1013",
CrystalDesert: "1014",
IsleofJanthir: "1015",
SeaofSorrows: "1016",
TarnishedCoast: "1017",
NorthernShiverpeaks: "1018",
Blackgate: "1019",
FergusonsCrossing: "1020",
Dragonbrand: "1021",
Kaineng: "1022",
DevonasRest: "1023",
EredonTerrace: "1024",
FissureofWoe: "2001",
Desolation: "2002",
Gandara: "2003",
Blacktide: "2004",
RingofFire: "2005",
Underworld: "2006",
FarShiverpeaks: "2007",
WhitesideRidge: "2008",
RuinsofSurmia: "2009",
SeafarersRest: "2010",
Vabbi: "2011",
PikenSquare: "2012",
AuroraGlade: "2013",
GunnarsHold: "2014",
JadeSea: "2101", // Mer de Jade [FR]
FortRanik: "2102", // Fort Ranik [FR]
AuguryRock: "2103", // Roche de l'Augure [FR]
VizunahSquare: "2104", // Place de Vizunah [FR]
Arborstone: "2105", // Pierre Arborea [FR]
Kodash: "2201", // Kodasch [DE]
Riverside: "2202", // Flussufer [DE]
ElonaReach: "2203", // Elonaspitze [DE]
AbaddonsMouth: "2204", // Abaddons Maul [DE]
DrakkarLake: "2205", // Drakkar-See [DE]
MillersSound: "2206", // Millersund [DE]
Dzagonur: "2207", // Dzagonur [DE]
BaruchBay: "2301" // Bahía de Baruch [ES]


Mini Map (scalable size)
Code: HTML
 
<iframe src="http://gw2timer.com/?enu_Server=1008&enu_Language=en&page=WvW&bol_showPanel=false&bol_showCoordinatesBar=false&bol_showLog=false&bol_showLeaderboard=false&bol_showObjectiveLabels=false&int_setInitialZoomWvW=1" width="360" height="240" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image


Medium Map with Compact Scoreboard (scalable size)
Code: HTML
 
<iframe src="http://gw2timer.com/?enu_Server=1008&enu_Language=en&page=WvW&bol_showPanel=false&bol_showCoordinatesBar=false&bol_showLog=false&bol_condenseLeaderboard=true&int_setInitialZoomWvW=2" width="720" height="480" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image


Large Map with Scoreboard and Log (scalable size)
Code: HTML
 
<iframe src="http://gw2timer.com/?enu_Server=1008&enu_Language=en&page=WvW&bol_showPanel=false&bol_showCoordinatesBar=true&bol_showLog=true&int_setInitialZoomWvW=3" width="1440" height="960" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>

Posted Image

Switch the true and false values around and see what configuration you like best. The size of the map is determined by the value of "int_setInitialZoomWvW", such that each bigger zoom value doubles the size of the map. The frame itself can be resized by changing the width and height properties of the iframe tag.
Offline Profile Quote Post Goto Top
 
f4rv3l
Unregistered

Hello :)

Is there any possibility to show the dashboard by using GW2Timer iframe? I tried "http://gw2timer.com?bol_showDashboard=true" as link (using Joomla!; adding a link is adequate) and everything works - except the dashboard. -.-"

Do you have any ideas?

Greetings
- f4rv3l
Quote Post Goto Top
 
Drant
Member Avatar

Because the dashboard shows "extra" information and to save visual space, the website disables the dashboard when it detects it's being embedded. The living story events will be shown on the chains page instead.

Is there a reason why you want the dashboard shown?
Offline Profile Quote Post Goto Top
 
f4rv3l
Unregistered

My guild mates are using GW2Timer only. A few of them are using the "pact supply network agent" feature every single day. The feature which shows the actual gemshop announcements etc. is very nice as well. :)

Greetings
- f4rv3l
Quote Post Goto Top
 
Drant
Member Avatar

I've removed the dashboard's embed check. Living story events will still be moved to the app panel to save vertical space. If other users want to remove the dashboard when embedding in your website, you can add the query string to the src URL like:
Code:
 
http://gw2timer.com/?bol_showDashboard=false

or
Code:
 
http://gw2timer.com/?page=Map
Offline Profile Quote Post Goto Top
 
f4rv3l
Unregistered

Awesome! Thank you very much. :D
Quote Post Goto Top
 
f4rv3l
Unregistered

Hey, it's me again. I'm sorry to ask these lots of dumb questions, but it there any possibility to show the timeline only?
I tried a lot, but it didn't work. :x
Quote Post Goto Top
 
Drant
Member Avatar

I didn't specifically add a timeline-only mode, but the overlay's stylesheet was tailored to fit the timeline neatly in a cramped window, so you could use that.

In the future if I add more rows to the timeline, you'll have to update/increase the height attribute.
Offline Profile Quote Post Goto Top
 
f4rv3l
Unregistered

Hey, it's me again!

I'm so sorry for being so annoying, but I have again a serious question. We got https at our homepage since a few weeks and it's not possible to use gw2 timer directly on our website, because there's a message of "unsafety content".

Is it possible for you to use https, too? It's possible to get this protocoll for free - so if you need a link, I can repost it. :)

Thanks again! And you've done a great job with the timer.

- farvel
Quote Post Goto Top
 
Drant
Member Avatar

Because the overlay app looks for the string "http://gw2timer.com" at the beginning of the address bar before allowing JavaScript executions, changing to "https" would break functionality of the overlay. The only reason I'd change to https is if the site had logins or stored account data on a server, which it doesn't.

It's unfortunate that the embed no longer works because your site changed. I'm not familiar with how an iframe is different on https, so did you do further research on that? Maybe you could use the <object> tag instead. Another way, although drastic, is to copy and host GW2Timer (the whole website) on your own server.
Offline Profile Quote Post Goto Top
 
Ventuszx
Unregistered

Hello! Is there a way to just embed the "Daily Achievements" section and a server reset countdown timer? Thanks. :^^:
Quote Post Goto Top
 
Drant
Member Avatar

Just paste the URL of the content you want into the src parameter, for example:
Code:
 
<iframe src="http://gw2timer.com/?page=Daily&int_setClock=3&enu_Language=en" width="360" height="580" seamless="seamless" style="border: 1px solid #444; box-shadow: 0px 0px 12px #223;"></iframe>


I put in http://gw2timer.com/?page=Daily&int_setClock=3&enu_Language=en as the src. The "int_setClock" is so the clock is set to hidden. The "page" is the content you want, and I set the "enu_Language" as English.

The width and height are tailored so it only shows the app panel instead of the map too; you can change the height if you want a taller window, but a longer width will show the map. Try it out on your website and tell me if you need to change anything.
Offline Profile Quote Post Goto Top
 
Ventuszx
Unregistered

Worked flawlessly! thank you for your time! I'm going to experiment a bit with the options! again, thank you :^^:
Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · GW2Timer.com - GW2 - Guild Wars 2 · Next Topic »