Add GW2Timer to your website

Joined: August 8th, 2008, 8:42 am

July 14th, 2014, 6:29 am #1

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: Select all

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: Select all

<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>

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


Tile Mode (scalable size)

Code: Select all

<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>



Mini-Clock (fixed size)

Code: Select all

<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>



Compact Clock (fixed size)

Code: Select all

<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>



Timers List (scalable height, fixed width)

Code: Select all

<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>



Mini-Clock and Timetable combo (scalable height, fixed width)

Code: Select all

<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>



Guild Missions window (scalable size)

Code: Select all

<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>



Resource Nodes window (scalable size)

Code: Select all

<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>



Simple Mode (fixed image)

Code: Select all

<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>



Mobile Mode (scalable height, fixed width)

Code: Select all

<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>


Alternatively, you can write your own code easily if you know a little HTML and CSS:

Code: Select all

<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: Select all

<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: Select all

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: Select all

?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: Select all

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.
Last edited by Drant on July 8th, 2018, 4:12 pm, edited 75 times in total.
Quote
Like
Share

Joined: August 8th, 2008, 8:42 am

January 19th, 2016, 10:59 pm #2

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: Select all

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: Select all

<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>



Medium Map with Compact Scoreboard (scalable size)

Code: Select all

<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>



Large Map with Scoreboard and Log (scalable size)

Code: Select all

<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>


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.
Last edited by Drant on May 7th, 2017, 11:32 pm, edited 5 times in total.
Quote
Like
Share

f4rv3l
f4rv3l

July 6th, 2016, 6:57 am #3

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
Share

Joined: August 8th, 2008, 8:42 am

July 6th, 2016, 9:04 am #4

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?
Quote
Like
Share

f4rv3l
f4rv3l

July 6th, 2016, 9:41 am #5

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
Share

Joined: August 8th, 2008, 8:42 am

July 6th, 2016, 4:44 pm #6

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: Select all

http://gw2timer.com/?bol_showDashboard=false
or

Code: Select all

http://gw2timer.com/?page=Map
Last edited by Drant on July 9th, 2016, 5:15 am, edited 3 times in total.
Quote
Like
Share

f4rv3l
f4rv3l

July 6th, 2016, 7:42 pm #7

Awesome! Thank you very much. :D
Quote
Share

f4rv3l
f4rv3l

September 4th, 2016, 5:30 am #8

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
Share

Joined: August 8th, 2008, 8:42 am

September 4th, 2016, 5:54 am #9

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.
Last edited by Drant on August 10th, 2017, 3:31 am, edited 7 times in total.
Quote
Like
Share

f4rv3l
f4rv3l

January 6th, 2017, 9:13 am #10

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
Share

Joined: August 8th, 2008, 8:42 am

January 6th, 2017, 9:54 am #11

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.
Last edited by Drant on January 6th, 2017, 10:27 am, edited 1 time in total.
Quote
Like
Share

Ventuszx
Ventuszx

June 6th, 2017, 11:40 pm #12

Hello! Is there a way to just embed the "Daily Achievements" section and a server reset countdown timer? Thanks. :^^:
Quote
Share

Joined: August 8th, 2008, 8:42 am

June 7th, 2017, 12:26 am #13

Just paste the URL of the content you want into the src parameter, for example:

Code: Select all

<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_set ... anguage=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.
Last edited by Drant on June 7th, 2017, 12:32 am, edited 2 times in total.
Quote
Like
Share

Ventuszx
Ventuszx

June 7th, 2017, 8:17 pm #14

Worked flawlessly! thank you for your time! I'm going to experiment a bit with the options! again, thank you :^^:
Quote
Share

Confirmation of reply: