TransLink Live Chat

<!DOCTYPE html> <html lang="en-CA" class="no-js"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://livechat.translink.ca/ccmwa/chat/b4e8eb4b-ada5-468e-a6e0-56fc678a0d55","20190105010018","https://web.archive.org/","web","/_static/", "1546650018"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />   <meta http-equiv="X-UA-Compatible" content="IE=EDGE"> <meta charset="utf-8"> <meta name="referrer" content="origin-when-cross-origin">       <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/normalize-7.0.0.css" rel="stylesheet" integrity="" crossorigin="anonymous"/> <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/tlFixes-1.1.0.css" rel="stylesheet" integrity="" crossorigin="anonymous"/> <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/tlReset-1.0.4.css" rel="stylesheet" integrity="" crossorigin="anonymous"/> <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/virtualCursor-2.0.3.css" rel="stylesheet" integrity="" crossorigin="anonymous"/> <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/details-polyfill-1.0.0.css" rel="stylesheet" integrity="" crossorigin="anonymous"/> <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/tlLayout-3.0.1.css" rel="stylesheet" integrity="" crossorigin="anonymous"/> <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/blocksLayout-3.4.0.css" rel="stylesheet" integrity="" crossorigin="anonymous"/> <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/largeLayout-1.0.3.css" rel="stylesheet" media="(min-width: 48em)"/> <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/smallLayout-1.0.3.css" rel="stylesheet" media="not all and (min-width: 48em)"/> <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/tlTheme-3.4.5.css" rel="stylesheet" integrity="" crossorigin="anonymous"/>   <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/siteNavigation-2.0.0.css" rel="stylesheet" integrity="" crossorigin="anonymous"/>   <link href="https://web.archive.org/web/20190105010018cs_/https://tlweblibs.translink.ca/tlHelpers-1.1.0.css" rel="stylesheet" integrity="" crossorigin="anonymous"/>   <style> #body { z-index: 100; background-color: white; } .siteLogo { height: 60px; } .navBlockLayout { position: static; } @supports (position: sticky) { #body { position: sticky; top: 0px; } } .navBlock .navBlockBackground { background-color: #005DAA; } .LoginBlock .WideFlexColumnBlockCopyMain *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(button) { width: 100%; max-width: 24rem; } #options-queueClosed * { font-size: 0.7778rem; line-height: 1.4286; color: inherit !important; } </style> <style> #chat-area { display: flex; flex-direction: column; } #send-message { order: 1; } @supports (position: sticky) { #send-message { position: sticky; bottom: 0px; } .ChatControlsBlock .WideFlexColumnBlockBackground { background: linear-gradient(transparent 0%, transparent 10%, white 10.01%); } } #message-box { flex: 1; } .ChatControlsBlock .flexContainer > *:not(.hidden) + * , #options > *:not(.hidden) + * { margin-left: 1rem; } .ChatControlsBlock .ChatBox { padding: 1rem; width: 100%; height: 100%; line-height: 1; resize: none; } .ChatControlsBlock .ChatSendMessage , .ChatControlsBlock .ChatEndSession { height: 100%; } ul.messages.current { margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; width: 100%; max-width: 63.3333rem; list-style: none; } .ChatMessage { display: flex !important; padding-bottom: 1rem; word-wrap: break-word; } .messages.current .ChatMessage.date-header:first-child .postedTime { display: none; } .ChatMessage:not(:first-child) { padding-top: 1rem; } .ChatMessage > .user:not(:empty) { flex-basis: 8rem; padding-right: 1rem; } .ChatMessage > .user figcaption { margin-top: 0.2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .ChatMessage > *:not(.user):not(.postedTime):not(.info) { flex: 1; } .ChatMessage > .info { display: none; } .ChatMessage:not(.date-header) > *:not(.user):not(.postedTime):first-child { margin-left: 8rem; } .ChatMessage > .postedTime:not(:empty) { flex-basis: 6rem; text-align: right; color: grey; } @media not all and (min-width: 48em) { .ChatMessage { flex-direction: column; } .ChatMessage > .user:not(:empty) { flex-basis: auto; display: contents; } .ChatMessage:not(.date-header) > *:not(.user):not(.postedTime):first-child { margin-left: 0px; } .ChatMessage > .user img { display: none; } .ChatMessage > .user figcaption { margin: 0px; padding: 0px; padding: 0px; } .ChatMessage > .postedTime:not(:empty) { flex-basis: auto; } } .ChatMessage + .ChatMessage { border-top: 1px solid grey; } </style> <style> select , option { background-color: white; } .needsfilled { border-color: red !important; color: red !important; } .needsfilled:not(select) { pointer-events: none !important; } [aria-labelledby="ui-id-1"]:not([style*="display: none"]) { display: contents !important; position: static !important; } [aria-labelledby="ui-id-1"] .ui-dialog-titlebar { display: none; } #endChatDialog { position: fixed; display: flex; justify-content: center; align-items: center; top: 0px; left: 0px; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.8); } </style> <style id="weblibs-shame"> html { overflow-x: hidden; } *:focus { outline-offset: 0px !important; } /* should be a theme */ .modal { margin: 2rem; padding: 1rem; background-color: white; } #endchat , #rejectEndChat { background-color: #807F83; } </style> <style> #Queue[value=""] #chat-area { display: none; } </style>   <script src="https://web.archive.org/web/20190105010018js_/https://tlweblibs.translink.ca/modernizr-tl-1.0.1.js" integrity="" crossorigin="anonymous"></script>       <meta name="viewport" content="width=device-width, initial-scale=1">     <meta name="twitter:card" content="summary"></meta> <meta property="og:url" content="https://web.archive.org/web/20190105010018/https://livechat.translink.ca/"/> <meta property="og:type" content="website"/> <meta property="og:title" content="TransLink Live Chat"/> <meta property="og:description" content="Connect with a Customer Service Representative through TransLink Live Chat."></meta> <meta property="og:image" content="https://web.archive.org/web/20190105010018im_/https://www.translink.ca/-/media/Images/content/meta/open_graph_live_chat.jpg"/> <meta property="og:image:width" content="1200"/> <meta property="og:image:height" content="630"/> <meta property="og:locale" content="en_CA"/>   <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://web.archive.org/web/20190105010018/https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=yjgw3WEjNE-B29BAlzsefQ&gtm_preview=env-2&gtm_cookies_win=x';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-N4QKDDN'); </script>     <link rel="canonical" href="https://web.archive.org/web/20190105010018/https://livechat.translink.ca/"/> <title>TransLink Live Chat</title> <meta name="description" content="Connect with a Customer Service Representative through TransLink Live Chat."></meta>   <link rel="icon" href="https://web.archive.org/web/20190105010018im_/https://tlweblibs.translink.ca/TransLink-favicon.png"/>  </head> <body ontouchstart="" data-role="page">  <noscript> <iframe src="https://web.archive.org/web/20190105010018if_/https://www.googletagmanager.com/ns.html?id=GTM-N4QKDDN>m_auth=yjgw3WEjNE-B29BAlzsefQ>m_preview=env-2>m_cookies_win=x" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript>  <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/chatScriptBrowser"></script>  <input id="Queue" name="Queue" type="hidden" value="b4e8eb4b-ada5-468e-a6e0-56fc678a0d55"/> <div id="nochat-area" role="tabpanel" class="themeBackgroundColor themeBackgroundImg"> <div id="nochat-centre" class="centre"> <div id="nochat-msginfo"></div> </div> </div> <script id="new-message-template" type="text/x-jquery-tmpl"> <li id="m-${id}" data-name="${name}" data-timestamp="${date}" class="ChatMessage useContentSpacing useFontSizing useFontColor useFontFamily message ${highlight}"> {{if showUser}} <figure class="user"> <img src="${gravatarUrl}" alt="${trimmedName}'s display picture" /> <figcaption><b>${trimmedName}</b></figcaption> </figure> {{/if}} <p>{{html message}}</p> <time id="t-${id}" datetime="${fulldate}" class="postedTime finePrint time">${when}</time> </li> </script> <script id="new-notification-template" type="text/x-jquery-tmpl"> <li data-timestamp="${date}" class="${type} ChatMessage useContentSpacing useFontSizing useFontColor useFontFamily message ${highlight}"> <p>{{html message}}</p> <a class="info" href="#" tabindex="-1"></a> <time datetime="${fulldate}" class="postedTime finePrint time">${when}</time> </li> </script> <script id="message-separator-template" type="text/x-jquery-tmpl"> <li class="message-separator"></li> </script> <script id="new-user-template" type="text/x-jquery-tmpl"> <li class="user" data-name="${name}"> <img class="gravatar" src="https://web.archive.org/web/20190105010018/https://secure.gravatar.com/avatar/${hash}?s=16&d=mm" /> <div class="details"> <span class="name">${name}</span> <span class="admin">{{if admin}}(admin){{/if}}</span> <span class="note{{if noteClass}} ${noteClass}{{/if}}" {{if note}} title="${note}" {{/if}}></span> <span class="flag{{if flagClass}} ${flagClass}{{/if}}" {{if flag}} title="${country}" {{/if}}></span> </div> </li> </script> <script id="new-userlist-template" type="text/x-jquery-tmpl"> <h3 class="userlist-header nav-header"> ${listname} </h3> <div> <ul id="${id}" /> </div> </script> <script id="new-tab-template" type="text/x-jquery-tmpl"> <li id="tabs-${id}" class="room" data-name="${name}" data-closed="${closed}" role="tab"> <span class="lock"></span> <span class="readonly"></span> <button> <span class="content">${name}</span> </button> <div class="close"></div> </li> </script> <script id="command-help-template" type="text/x-jquery-tmpl"> <dt> <span class="command command-name">${Name}</span> {{if Arguments}}<span class="command command-args">${Arguments}</span>{{/if}} </dt> <dd>${Description}</dd> </script>  <script id="gravatar-profile-template" type="text/x-jquery-tmpl"> <div class="collapsible_content"> <div class="collapsible_pin"> </div> <h3 class="collapsible_title"> Gravatar Profile: ${profileUrl} (click to show/hide) </h3> <div class="collapsible_box"> <div class="gravatar_${hash} gravatarProfile"> <div class="user"> <img src="${thumbnailUrl}"> <span class="name">${preferredUsername}</span> (${name.formatted}) <p><a href="${profileUrl}" target="_blank">${profileUrl}</a></p> </div> </div> </div> </div> </script>  <div id="body" class="container"> <section class="content-wrapper main-content clear-fix row "> <section id="page"> <header id="heading" role="heading"> <div style="display:none !important">  <div id="bannerLogoContainer" class="banner" role="banner"></div> <div id="LogoImg" class="LogoImg"></div> <nav> <ul id="tabs" role="tablist"> <li id="tabs-lobby" class="current lobby" data-name="Lobby" role="tab"> <button accesskey="l"> <span class="content">Lobby</span> </button> </li> </ul> </nav> </div> <nav class="navBlock gridContainer navBlockLayout"> <div class="navBlockBackground"></div> <div class="navBlockLinksArea flexContainer verticallyCenteredContent"> <a href="/web/20190105010018/https://livechat.translink.ca/" title="Link to 'Home' page on this site"> <img src="https://web.archive.org/web/20190105010018im_/https://tlweblibs.translink.ca/TransLink-logo-white.svg" alt="TransLink Logo" class="siteLogo"/> </a> </div> </nav> </header> <label id="prechat-area"></label> <form id="pre-chat" action="#" autocomplete="off"> <div class="LoginBlock gridContainer WideFlexColumnBlockLayout"> <div class="WideFlexColumnBlockBackground"></div> <header class="WideFlexColumnBlockHeader"></header> <section class="WideFlexColumnBlockCopyMain centeredContent flexContainer flexColumn horizontallyCenteredContent"> <div class="screen-reader-offscreen hidden" id="prechat-alert-message" role="alert" aria-atomic="true"></div> <div class="useContentSpacing useFontFamily useFontSizing useFontColor useFormField useDropDown useButton"> <h1>TransLink Live Chat</h1> <p> To start chatting with a customer service representative, please enter your name and email address below. </p> <label> First Name <input type="text" id="txtName" name="txtName" value="" required maxlength="50" title="First Name" placeholder="Name"> </label> <label> Email <input type="text" id="txtEmail" name="txtEmail" value="" required maxlength="50" title="Email" placeholder="Email"> </label> <label for="ddlTopic"> Topic For Chat </label> <div id="topicRow" class="input_row"> <input type="text" id="txtTopic" name="txtTopic" value="Topic for Chat" required maxlength="81"/> </div> <div id="options-prechat-container" class="finePrint contentItem"> <div id="options-prechat" class="themeBackgroundColorBlend"> </div> </div> <div id="chat-btn-container" class="input_row contentItem flexContainer" style="justify-content: center; margin-top: 1.5rem; margin-bottom: 1.5rem"> <button id="requestchat">Enter Chat</button> </div> <p class="finePrint"> The personal information requested when using Live Chat is collected by TransLink to facilitate use of Live Chat and respond to your enquiries. This is done in accordance with Part 3 of the Freedom of Information and Protection of Privacy Act. Please refer to <a href="https://web.archive.org/web/20190105010018/https://translink.ca/privacypolicy" target="_blank" title="Link to 'Privacy' page on translink.ca and opens in a new window." rel="noopener">translink.ca/privacypolicy</a> or direct any questions regarding the collection and use of this information to TransLink Privacy Officer, 287 Nelson鈥檚 Court, New Westminster, BC, V3L 0E7 (Tel: <a title="call 778-375-7500" href="https://web.archive.org/web/20190105010018/tel:778-375-7500">778-375-7500</a>). </p> </div> </section> </div> </form> </section> </section> </div> <div id="errNotice"></div> <div id="chat-area" role="main"> <div id="main-chat-page-description-playback" class="screen-reader-offscreen" role="alert" aria-atomic="true"></div> <div id="current-chat-message-playback" aria-live="assertive" class="screen-reader-offscreen hidden"></div> <div id="previous-chat-messages-playback" aria-live="assertive" class="screen-reader-offscreen hidden"></div> <ul id="messages-lobby" class="messages current"></ul> <form id="send-message" action="#" autocomplete="off"> <div class="ChatControlsBlock gridContainer WideFlexColumnBlockLayout fullBleed"> <div class="WideFlexColumnBlockBackground"></div> <header class="WideFlexColumnBlockHeader"></header> <section class="WideFlexColumnBlockCopyMain flexContainer"> <div id="message-box" class="useFormField"> <textarea id="new-message" maxlength="1000" rows="1" class="ChatBox" autofocus></textarea> </div> <div id="options" class="useButton"> <button id="send" class="send ChatSendMessage" style="color: white"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24" height="24" viewbox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} </style> <path class="st0" d="M2,21l21-9L2,3v7l15,2L2,14V21z"/> </svg> </button><button id="endchat" class="send ChatEndSession" style="color: white"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24" height="24" viewbox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} </style> <path class="st0" d="M19,6.4L17.6,5L12,10.6L6.4,5L5,6.4l5.6,5.6L5,17.6L6.4,19l5.6-5.6l5.6,5.6l1.4-1.4L13.4,12L19,6.4z"/> </svg> </button> </div> </section> </div> </form> <audio src="/web/20190105010018im_/https://livechat.translink.ca/CCMWa/Content/sounds/notification.wav" id="noftificationSound" hidden></audio> </div> <div id="endChatDialog" class="useFontFamily useFontColor useContentSpacing useButton" style="display: none;" aria-hidden="true"> <div class="modal flexContainer flexColumn"> <h2>End Session</h2> <p>Are you sure you want to end this chat session?</p> <button id="acceptEndChat">Yes, end session</button> <button id="rejectEndChat">No, return to chat</button> </div> </div> <div id="chatErrorDialog" title="Confirmation Prompt" style="display: none;"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><span id="chatErrorMsg"></span></p> <div id="chatErrorDialog_errorPrompt" style="display: none;"> <div id="chatErrorDialog_errorPromptQuestion"></div> <hr class="chatDialogSeparator"/> <a role="button" class="accept" id="chatErrorDialog_Accept" title="Yes" autofocus tabindex="0"></a> <a role="button" class="reject" id="chatErrorDialog_Reject" title="No" tabindex="0"></a> </div> </div>  <div id="screenReaderChatMessagesDialog" aria-describedby="screenReaderChatMessagesDialogDescription" title="Confirmation Prompt" style="display: none;" aria-hidden="true"> <div id="screenReaderChatMessagesDialogDescription" class="screen-reader-offscreen"></div> <div id="screenReaderChatMessagesDialog-alert-message" role="alert" class="screen-reader-offscreen" aria-atomic="true"></div> <p aria-hidden="true"><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>How many messages to play back?</p> <hr class="chatDialogSeparator"/> <input class="input_row" id="txtScreenReaderChatMessages" name="txtScreenReaderChatMessages" type="text" role="textbox" aria-label="Number of messages" value="Number of messages" aria-required="true" tabindex="0"/> <a role="button" class="accept" id="screenReaderChatMessagesOkButton" title="Yes" aria-label="Yes" tabindex="1"></a> <a role="button" class="reject" id="screenReaderChatMessagesCancelButton" title="No" aria-label="No" tabindex="2"></a> </div> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/chatScriptSharedCore"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/bootstrapjs"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/chatScriptShared"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/signalr/hubs"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/Chat.utility.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/en-US/Culture/JScriptUpdate?js=ChatPublicResx"></script> <script> if (!window.ccmwa) { window.ccmwa = {}; } window.ccmwa.currentCulture = 'en-US'; var queueId = null; var chatContainer = null; </script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/chat.public.config.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/tinymce/tinymce.min.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/Chat.emoji.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/Chat.ask.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/Chat.toast.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/Chat.ui.public.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/Chat.documentOnWrite.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/Chat.twitter.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/Chat.pinnedWindows.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/Chat.githubissues.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/Chat.public.js"></script> <script src="/web/20190105010018js_/https://livechat.translink.ca/CCMWa/Scripts/Chat.preChatValidate.demo.js"></script> <script type="text/javascript"> function onSelectChange(value) { if ($("#ddlTopic").hasClass("needsfilled")) { $("#ddlTopic").removeClass("needsfilled"); } return; } $(document).ready(function () { }); </script> <script src="https://web.archive.org/web/20190105010018js_/https://tlweblibs.translink.ca/tlHelpers-1.3.3.js" integrity="" crossorigin="anonymous"></script> <script src="https://web.archive.org/web/20190105010018js_/https://tlweblibs.translink.ca/aria-polyfill-1.0.5.js" integrity="" crossorigin="anonymous"></script> <script src="https://web.archive.org/web/20190105010018js_/https://tlweblibs.translink.ca/virtualCursor-1.0.1.js" integrity="" crossorigin="anonymous"></script> <script> $(function () { "use strict"; virtualCursor && virtualCursor.init({ focusableElementsSelector: "a, button, select, option, input, [tabindex]" , focusableContainerClass: "focusableContainer" , noFocusClass: "noFocus" , showFocusClass: "showFocusCursor" }); $("#new-message").keydown(function (e) { if (e.which == 13) { $("html")[0].scrollTo(0, $("html")[0].scrollHeight); } }); $("#send").click(function () { $("html")[0].scrollTo(0, $("html")[0].scrollHeight); }); }); </script> </body> </html>

CINXE.COM

TransLink Live Chat