Contact block: Alpha design pattern

  • Last updated: Aug 13, 2019
  • Progress: Alpha - draft
  • Design type: Pattern
  • Lead: Treasury Board of Canada Secretariat

The contact block is a set of tested patterns to help display contact information in a clear and consistent layout to ensure users call the right phone number and have the documents they need ready before they call.

The pattern was also tested to support redirecting users to the online self-serve option where available and preferred.

On this page

Research

Layout choices
  • Redirecting users to primary self-service option first - online
  • Forcing choices (use of expand collapse for secondary options, smart question for audiences and url parameters) - make sure they get the right number
  • Using an interactive pattern to bring attention to what needs to be prepared before calling/

When to use and how to implement

You will need to determine which of the following patterns is most appropriate:

Phone channel block

When to use: Use the phone channel block to show details about how to contact the government by phone for an institution or service.

Before you call

To verify your identity, you'll need your:

Phone number

1-800-xxx-xxxx

Outside Canada and the US*:
1-613-xxx-xxxx

Hours
(in local time)
Day Hours
Mon-Fri 9 am to 9 pm
Sat 9 am to 5 pm
Sun Closed
Wait times and holidays
Day Wait times
Mon-Tue Long wait times
Wed Medium wait times
Thu-Sat Short wait times
Sun Closed

Holiday closures 2019:

  • April 19 (Good Friday)
  • April 22 (Easter Monday)
  • May 20 (Victoria Day)
  • (etc.)
*When calling outside of Canada lines operate in Eastern time
Code
<dl class="dl-horizontal contact-dl">
 <dt>Before you call</dt>
  <dd>
   <p>To verify your identity, you'll need your:</p>
   <ul class="list-unstyled can-ca-form checklist-completion-check">
    <li class="checkbox checkbox-green">
     <input type="checkbox" id="checkbox_1" name="before-calling">
     <label for="checkbox_1">Social Insurance Number</label>
    </li>
    <li class="checkbox checkbox-green">
     <input type="checkbox" id="checkbox_2" name="before-calling">
     <label for="checkbox_2">Full name and date of birth</label>
    </li>
    <li class="checkbox checkbox-green">
     <input type="checkbox" id="checkbox_3" name="before-calling">
     <label for="checkbox_3">Complete address</label>
    </li>
  </ul>
  <p>
   <label class="label label-danger" id="before-calling-incomplete">You need all of the above to call</label>
   <label class="label label-success hidden" id="before-calling-complete">You are ready to call</label>
  </p>
 </dd>
 <dt>Phone number</dt>
 <dd><p><b>1-800-xxx-xxxx</b></p><p>Outside Canada and the US<a href="#outside-time-zone">*</a>: <br><b>1-613-xxx-xxxx</b></p></dd>
 <dt>Hours</dt>
 <dd>(in local time)
  <table class="table">
   <thead>
    <tr>
     <th class="wb-inv">Day</th>
     <th class="wb-inv">Hours</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Mon-Fri</td>
     <td>9 am to 9 pm</td>
    </tr>
    <tr>
     <td>Sat</td>
     <td>9 am to 5 pm</td>
    </tr>
    <tr>
     <td>Sun</td>
     <td>Closed</td>
    </tr>
   </tbody>
  </table>
  <details>
   <summary>Wait times and holidays</summary>
   <div class="row">
    <table class="table">
     <thead>
      <tr>
       <th class="wb-inv">Day</th>
       <th class="wb-inv">Wait times</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>Mon-Tue</td>
       <td>Long wait times</td>
      </tr>
      <tr>
       <td>Wed</td>
       <td>Medium wait times</td>
      </tr>
      <tr>
       <td>Thu-Sat</td>
       <td>Short wait times</td>
      </tr>
      <tr>
       <td>Sun</td>
       <td>Closed</td>
      </tr>
     </tbody>
    </table>
   </div>
   <h3 class="h4">Holiday closures 2019:</h3>
   <ul>
    <li>April 19 (Good Friday) </li>
    <li>April 22 (Easter Monday) </li>
    <li>May 20 (Victoria Day)</li>
    <li>(etc.)</li>
   </ul>
  </details>
  <small id="outside-time-zone">*When calling outside of Canada lines operate in Eastern time</small>
 </dd>
</dl>

Note:

  • Using a details summary: When using the checklist that checks completion in a details summary, the class "checklist-completion-check" must be applied to the details tag instead of the unordered list tag

Multi-channel contact block

When to use: If there's more than one audience in addition to ways to contact, use the multi-channel contact block.

What to avoid: Do not make all channels visible. Decide on the best option and use progressive disclosure to make the choice between secondary options easier and conscious on the part of the user.

Online:

Change your address by signing in.

Alternative: Use a mobile application

By phone:
Call us to change your address
Before you call

To verify your identity, you'll need your:

Phone number

1-800-xxx-xxxx

Outside Canada and the US*:
1-613-xxx-xxxx

Hours
(in local time)
Day Hours
Mon-Fri 9 am to 9 pm
Sat 9 am to 5 pm
Sun Closed
Wait times and holidays
Day Wait times
Mon-Tue Long wait times
Wed Medium wait times
Thu-Sat Short wait times
Sun Closed

Holiday closures 2019:

  • April 19 (Good Friday)
  • April 22 (Easter Monday)
  • May 20 (Victoria Day)
  • (etc.)
*When calling outside of Canada lines operate in Eastern time
By mail:
Mail a form to change your address

Processing time: it may take up to x weeks to change your address by mail.

  1. Complete the Address change form
  2. Mail the completed form to the address on the form

Note: You can change someone else's address at the same time as yours, such as your spouse's or common-law partner's. Your letter must include their:

  • name
  • social insurance number
  • signature
Code
<dl class="dl-horizontal contact-dl">
 <dt>Online:</dt>
 <dd>
  <p>Change your address by signing in.</p>
  <div class="mrgn-tp-lg">
   <a href="" class="btn btn-call-to-action">Sign in to an online account</a>  <span class="register"><a href="">Register</a></span>
  </div>
  <p><b>Alternative:</b> <a href="">Use a mobile application</a></p>
 </dd>
 <dt>By phone:</dt>
 <dd>
  <details class="checklist-completion-check">
   <summary>Call us to change your address</summary>
   <dl class="dl-horizontal">
    <dt>Before you call</dt>
    <dd>
     <p>To verify your identity, you'll need your:</p>
     <ul class="list-unstyled can-ca-form">
      <li class="checkbox checkbox-green">
       <input type="checkbox" id="checkbox_4" name="before-calling-multi">
       <label for="checkbox_4">Social Insurance Number</label>
      </li>
      <li class="checkbox checkbox-green">
       <input type="checkbox" id="checkbox_5" name="before-calling-multi">
       <label for="checkbox_5">Full name and date of birth</label>
      </li>
      <li class="checkbox checkbox-green">
       <input type="checkbox" id="checkbox_6" name="before-calling-multi">
       <label for="checkbox_6">Complete address</label>
      </li>
     </ul>
     <p>
      <label class="label label-danger" id="before-calling-multi-incomplete">You need all of the above to call</label>
      <label class="label label-success hidden" id="before-calling-multi-complete">You are ready to call</label>
     </p> </dd>
    </dd>
    <dt>Phone number</dt>
    <dd><p><strong>1-800-xxx-xxxx</strong></p><p>Outside Canada and the US<a href="#outside-time-zone-multi>*</a>: <br><strong>1-613-xxx-xxxx</strong></p></dd>
    <dt>Hours</dt>
    <dd>(in local time)
     <table class="table">
      <thead>
       <tr>
        <th class="wb-inv">Day</th>
        <th class="wb-inv">Hours</th>
       </tr>
      </thead>
      <tbody>
       <tr>
        <td>Mon-Fri</td>
        <td>9 am to 9 pm</td>
       </tr>
       <tr>
        <td>Sat</td>
        <td>9 am to 5 pm</td>
       </tr>
       <tr>
        <td>Sun</td>
        <td>Closed</td>
       </tr>
      </tbody>
     </table>
     <details>
      <summary>Wait times and holidays</summary>
      <div class="row">
       <table class="table">
        <thead>
         <tr>
          <th class="wb-inv">Day</th>
          <th class="wb-inv">Wait times</th>
         </tr>
        </thead>
        <tbody>
         <tr>
          <td>Mon-Tue</td>
          <td>Long wait times</td>
         </tr>
         <tr>
          <td>Wed</td>
          <td>Medium wait times</td>
         </tr>
         <tr>
          <td>Thu-Sat</td>
          <td>Short wait times</td>
         </tr>
         <tr>
          <td>Sun</td>
          <td>Closed</td>
         </tr>
        </tbody>
       </table>
      </div>
      <h3 class="h4">Holiday closures 2019:</h3>
      <ul>
       <li>April 19 (Good Friday) </li>
       <li>April 22 (Easter Monday) </li>
       <li>May 20 (Victoria Day)</li>
       <li>(etc.)</li>
      </ul>
     </details>
     <small id="outside-time-zone-multi">*When calling outside of Canada lines operate in Eastern time</small>
    </dd>
   </dl>
  </details>
 </dd>
 <dt>By mail:</dt>
 <dd>
  <details>
   <summary>Mail a form to change your address</summary>
   <div class="alert alert-info">
    <p><strong>Processing time</strong>: it may take up to x weeks to change your address by mail.</p>
   </div>
   <ol>
    <li>Complete the <a href="">Address change form</a></li>
    <li>Mail the completed form to the address on the form</li>
   </ol>
   <p>Note: You can change someone else's address at the same time as yours, such as your spouse's or common-law partner's. Your letter must include their:</p>
   <ul>
    <li>name</li>
    <li>social insurance number</li>
    <li>signature</li>
   </ul>
  </details>
 </dd>
</dl>

Note:

  • Using a details summary: When using the checklist that checks completion in a details summary, the class "checklist-completion-check" must be applied to the details tag. If not, then it should be applied instead of the unordered list tag of the checkboxes.

Multi-channel multi-context contact block

When to use: Use the multi-channel contact block when there is more than one way to contact or if there is also an online self-serve option.

What type of address do you need to change?
Code
<div data-wb-urlmapping='{
 "p=personal": { "action": "addClass", "class": "hidden" },
 "p=business": { "action": "addClass", "class": "hidden" }
}' class="wb-frmvld">
 <form method="get">
  <!--Smart question!-->
  <div id="question1" class="wb-fieldflow" data-wb-fieldflow='{
   "noForm":true,
   "renderas":"radio",
   "base": { "live": true },
   "noreqlabel": true,
   "default": { "action": "addClass", "source":"#personal,#personal-btn,#business,#business-btn", "class": "hidden" }
  }'>
   <p>What type of address do you need to change?</p>
   <ul>
    <li data-wb-fieldflow='[
     { "action": "removeClass", "source":"#personal-btn", "class": "hidden"},
     { "action": "removeClass", "source":"#personal", "class": "hidden"}
    ]'>a personal address</li> <!--result-->
    <li data-wb-fieldflow='[
     { "action": "removeClass", "source":"#business-btn", "class": "hidden"},
     { "action": "removeClass", "source":"#business", "class": "hidden" }
    ]'>a business address</li>
   </ul>
  </div>
 </form>
</div>
<a href="#personal" id="personal-btn" class="btn btn-primary hidden">Continue</a>
<a href="#business" id="business-btn" class="btn btn-primary hidden">Continue</a>
<div data-wb-urlmapping='{ "p=personal": { "action": "removeClass", "class": "hidden" } }' class="hidden mrgn-bttm-lg mrgn-tp-lg" id="personal">
 <h2 class="h3">Change a personal address</h2>
 <dl class="dl-horizontal contact-dl">
  <dt>Online:</dt>
  <dd>
   <p>Change your address by signing in.</p>
   <div class="mrgn-tp-lg">
    <a href="" class="btn btn-call-to-action">Sign in to an online account</a>  <span class="register"><a href="">Register</a></span>
   </div>
   <p><b>Alternative:</b> <a href="">Use a mobile application</a></p>
  </dd>
  <dt>By phone:</dt>
  <dd>
   <details class="checklist-completion-check">
    <summary>Call us to change your address</summary>
    <dl class="dl-horizontal">
     <dt>Before you call</dt>
     <dd>
      <p>To verify your identity, you'll need your:</p>
      <ul class="list-unstyled can-ca-form">
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_7" name="before-calling-multi-personal">
        <label for="checkbox_7">Social Insurance Number</label>
       </li>
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_8" name="before-calling-multi-personal">
        <label for="checkbox_8">Full name and date of birth</label>
       </li>
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_9" name="before-calling-multi-personal">
        <label for="checkbox_9">Complete address</label>
       </li>
      </ul>
      <p>
       <label class="label label-danger" id="before-calling-multi-personal-incomplete">You need all of the above to call</label>
       <label class="label label-success hidden" id="before-calling-multi-personal-complete">You are ready to call</label>
      </p>
     </dd>
     <dt>Phone number</dt>
     <dd><p><strong>1-800-xxx-xxxx</strong></p><p>Outside Canada and the US<a href="#outside-time-zone-mm-personal">*</a>: <br><strong>1-613-xxx-xxxx</strong></p></dd>
     <dt>Hours</dt>
     <dd>(in local time)
      <table class="table">
       <thead>
        <tr>
         <th class="wb-inv">Day</th>
         <th class="wb-inv">Hours</th>
        </tr>
       </thead>
       <tbody>
        <tr>
         <td>Mon-Fri</td>
         <td>9 am to 9 pm</td>
        </tr>
        <tr>
         <td>Sat</td>
         <td>9 am to 5 pm</td>
        </tr>
        <tr>
         <td>Sun</td>
         <td>Closed</td>
        </tr>
       </tbody>
      </table>
      <details>
       <summary>Wait times and holidays</summary>
       <div class="row">
        <table class="table">
         <thead>
          <tr>
           <th class="wb-inv">Day</th>
           <th class="wb-inv">Wait times</th>
          </tr>
         </thead>
         <tbody>
          <tr>
           <td>Mon-Tue</td>
           <td>Long wait times</td>
          </tr>
          <tr>
           <td>Wed</td>
           <td>Medium wait times</td>
          </tr>
          <tr>
           <td>Thu-Sat</td>
           <td>Short wait times</td>
          </tr>
          <tr>
           <td>Sun</td>
           <td>Closed</td>
          </tr>
         </tbody>
        </table>
       </div>
       <h3 class="h4">Holiday closures 2019:</h3>
       <ul>
        <li>April 19 (Good Friday) </li>
        <li>April 22 (Easter Monday) </li>
        <li>May 20 (Victoria Day)</li>
        <li>(etc.)</li>
       </ul>
      </details>
      <small id="outside-time-zone-mm-personal">*When calling outside of Canada lines operate in Eastern time</small>
     </dd>
     <details>
      <summary>Avoid waiting on the phone line</summary>
      <ul>
       <li><a href="">Benefits of signing up for an online account</a></li>
      </ul>
     </details>
     <details>
      <summary>If you are contacting us on someone else's behalf</summary>
      <p>Any additional info needed goes here.</p>
     </details>
    </dl>
   </details>
  </dd>
  <dt>By mail:</dt>
  <dd>
   <details>
    <summary>Mail a form to change your address</summary>
    <div class="alert alert-info">
     <p><strong>Processing time</strong>: it may take up to x weeks to change your address by mail.</p>
    </div>
    <ol>
     <li>Complete the <a href="">Address change form</a></li>
     <li>Mail the completed form to the address on the form</li>
    </ol>
    <p>Note: You can change someone else's address at the same time as yours, such as your spouse's or common-law partner's. Your letter must include their:</p>
    <ul>
     <li>name</li>
     <li>social insurance number</li>
     <li>signature</li>
    </ul>
   </details>
  </dd>
 </dl>
</div>
<div data-wb-urlmapping='{ "p=business": { "action": "removeClass", "class": "hidden" } }' class="hidden mrgn-bttm-lg mrgn-tp-lg" id="business">
 <h2 class="h3">Change a business address</h2>
 <dl class="dl-horizontal contact-dl">
  <dt>Online:</dt>
  <dd>
   <p>Change your business address by signing in.</p>
   <div class="mrgn-tp-lg">
    <a href="" class="btn btn-call-to-action">Sign in to an online account</a>  <span class="register"><a href="">Register</a></span>
   </div>
   <p><b>Alternative:</b> <a href="">Use a mobile application</a></p>
  </dd>
  <dt>By phone:</dt>
  <dd>
   <details class="checklist-completion-check">
    <summary>Call us to change your business address</summary>
    <dl class="dl-horizontal">
     <dt>Before you call</dt>
     <dd>
      <p>To verify your identity, you'll need your:</p>
      <ul class="list-unstyled can-ca-form">
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_10" name="before-calling-multi-business">
        <label for="checkbox_10">Business number</label>
       </li>
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_11" name="before-calling-multi-business">
        <label for="checkbox_11">Business name</label>
       </li>
       <li class="checkbox checkbox-green">
        <input type="checkbox" id="checkbox_12" name="before-calling-multi-business">
        <label for="checkbox_12">Your business address</label>
       </li>
      </ul>
      <p>
       <label class="label label-danger" id="before-calling-multi-business-incomplete">You need all of the above to call</label>
       <label class="label label-success hidden" id="before-calling-multi-business-complete">You are ready to call</label>
      </p>
     </dd>
     <dt>Phone number</dt>
     <dd><p><strong>1-800-xxx-xxxx</strong></p><p>Outside Canada and the US<a href="#outside-time-zone-mm-business">*</a>: <br><strong>1-613-xxx-xxxx</strong></p></dd>
     <dt>Hours</dt>
     <dd>(in local time)
      <table class="table">
       <thead>
        <tr>
         <th class="wb-inv">Day</th>
         <th class="wb-inv">Hours</th>
        </tr>
       </thead>
       <tbody>
        <tr>
         <td>Mon-Fri</td>
         <td>9 am to 9 pm</td>
        </tr>
        <tr>
         <td>Sat</td>
         <td>9 am to 5 pm</td>
        </tr>
        <tr>
         <td>Sun</td>
         <td>Closed</td>
        </tr>
       </tbody>
      </table>
      <details>
       <summary>Wait times and holidays</summary>
       <div class="row">
        <table class="table">
         <thead>
          <tr>
           <th class="wb-inv">Day</th>
           <th class="wb-inv">Wait times</th>
          </tr>
         </thead>
         <tbody>
          <tr>
           <td>Mon-Tue</td>
           <td>Long wait times</td>
          </tr>
          <tr>
           <td>Wed</td>
           <td>Medium wait times</td>
          </tr>
          <tr>
           <td>Thu-Sat</td>
           <td>Short wait times</td>
          </tr>
          <tr>
           <td>Sun</td>
           <td>Closed</td>
          </tr>
         </tbody>
        </table>
       </div>
       <h3 class="h4">Holiday closures 2019:</h3>
       <ul>
        <li>April 19 (Good Friday) </li>
        <li>April 22 (Easter Monday) </li>
        <li>May 20 (Victoria Day)</li>
        <li>(etc.)</li>
       </ul>
      </details>
      <small id="outside-time-zone-mm-business">*When calling outside of Canada lines operate in Eastern time</small>
     </dd>
     <details>
      <summary>Avoid waiting on the phone line</summary>
      <ul>
       <li><a href="">Benefits of signing up for an online business account</a></li>
      </ul>
     </details>
     <details>
      <summary>If you are contacting us on someone else's behalf</summary>
      <p>Any additional info needed goes here.</p>
     </details>
    </dl>
   </details>
  </dd>
  <dt>By mail:</dt>
  <dd>
   <details>
    <summary>Mail a form to change your business address</summary>
    <div class="alert alert-info">
     <p><strong>Processing time</strong>: it may take up to x weeks to change your address by mail.</p>
    </div>
    <ol>
     <li>Complete the <a href="">Address change form</a></li>
     <li>Mail the completed form to the address on the form</li>
    </ol>
    <p>Note: You can change someone else's address at the same time as yours, such as your spouse's or common-law partner's. Your letter must include their:</p>
    <ul>
     <li>name</li>
     <li>social insurance number</li>
     <li>signature</li>
    </ul>
   </details>
  </dd>
 </dl>
</div>

Notes:

  • Links to a specific context: When linking to the page from a context, use a URL parameter to hide the question and other contexts, such as "?p=personal" or "?p=business".
  • Using a details summary: When using the checklist that checks completion in a details summary, the class "checklist-completion-check" must be applied to the details tag. If not, then it should be applied instead of the unordered list tag of the checkboxes.

Discussion

Discuss the pattern in github issues