Contact blocks

Contact blocks allow you to present contact options to users on the Home page (and sometimes internal pages) of your help center.

Contact blocks, like custom blocks and content blocks, are configurable through theme settings. The style, color palette, images, text, URLs and number of blocks and columns will determine how things look on your help center.

Left-aligned contact blocks
View code
<template id="tmpl-contact-blocks">
  <% var getColumnClasses = function(numberColumns) {
    var classNames = numberColumns === 'auto' ? 'col-auto' : 'col-12';
    if (numberColumns >= 2) classNames += ' md:col-6';
    if (numberColumns >= 3) classNames += ' lg:col-4';
    if (numberColumns >= 4) classNames += ' xl:col-3';
    return classNames;
  } %>
  <div class="container py-4">
    {{#if settings.contact_blocks_heading}}
      <h2 class="inline-flex align-items-baseline mt-6" x-data="{ src: Theme.assets['contact-blocks-heading'] }">
        <template x-if="src">
          <img class="svg-icon mr-2" src="{{asset 'placeholder.png'}}" alt="" aria-hidden="true" :src="src" />
        </template>
        {{#if settings.use_translations}}
          {{dc settings.contact_blocks_heading}}
        {{else}}
          {{settings.contact_blocks_heading}}
        {{/if}}
      </h2>
    {{/if}}
    <ul class="list-unstyled row row-sm justify-content-<% if (blocks.length > numberColumns) { %>start<% } else { %>center<% } %> mb-0{{#unless settings.contact_blocks_heading}} mt-4{{/unless}}">
      <% blocks.forEach(function(block, index) { %>
        <li class="mb-4 <%= getColumnClasses(numberColumns) %>">
          <div class="card card-body h-full text-base text-<%= color %>-inverse bg-<%= color %> <% if (block.html_url) { %> transition-fast hover:shadow-sm <% if (color === 'white') { %> hover:border-primary<% } %><% } %>">
            <div class="media">
              <% if (imageHeight) { %>
                <img class="mt-4 <% if (block.name) { %>align-self-start<% } else { %>align-self-baseline<% } %>" alt="<%= block.name %>" src="<%= images[index] || images[0] %>" style="height: <%= imageHeight %>; width: auto;" />
              <% } %>
              <div class="media-body<% if (imageHeight) { %> mt-1 ml-4<% } %>">
                <% if (block.name) { %>
                  <h3 class="h4 mt-4 mb-<% if (block.description) { %>2<% } else { %>4<% } %>">
                    <% if (block.html_url) { %>
                      <a class="link-stretched text-inherit text-<%= color %>-inverse hover:text-<%= color %>-inverse hover:no-underline" href="<%= block.html_url %>">
                        <%= block.name %>
                      </a>
                    <% } else { %>
                      <%= block.name %>
                    <% } %>
                  </h3>
                <% } %>
                <% if (block.description) { %>
                  <p class="font-size-md">
                    <%= block.description %>
                  </p>
                <% } %>
              </div>
            </div>
          </div>
        </li>
      <% }) %>
    </ul>
  </div>
</template>
Centered contact blocks
View code
<template id="tmpl-contact-blocks">
  <% var getColumnClasses = function(numberColumns) {
    var classNames = numberColumns === 'auto' ? 'col-auto' : 'col-12';
    if (numberColumns >= 2) classNames += ' md:col-6';
    if (numberColumns >= 3) classNames += ' lg:col-4';
    if (numberColumns >= 4) classNames += ' xl:col-3';
    return classNames;
  } %>
  <div class="container py-4">
    {{#if settings.contact_blocks_heading}}
      <h2 class="inline-flex align-items-baseline mt-6" x-data="{ src: Theme.assets['contact-blocks-heading'] }">
        <template x-if="src">
          <img class="svg-icon mr-2" src="{{asset 'placeholder.png'}}" alt="" aria-hidden="true" :src="src" />
        </template>
        {{#if settings.use_translations}}
          {{dc settings.contact_blocks_heading}}
        {{else}}
          {{settings.contact_blocks_heading}}
        {{/if}}
      </h2>
    {{/if}}
    <ul class="list-unstyled row row-sm justify-content-<% if (blocks.length > numberColumns) { %>start<% } else { %>center<% } %> mb-0{{#unless settings.contact_blocks_heading}} mt-4{{/unless}}">
      <% blocks.forEach(function(block, index) { %>
        <li class="mb-4 <%= getColumnClasses(numberColumns) %>">
          <div class="card card-body h-full text-base text-<%= color %>-inverse bg-<%= color %> <% if (block.html_url) { %> transition-fast hover:shadow-sm <% if (color === 'white') { %> hover:border-primary<% } %><% } %>">
            <div class="media">
              <% if (imageHeight) { %>
                <img class="mt-4 <% if (block.name) { %>align-self-start<% } else { %>align-self-baseline<% } %>" alt="<%= block.name %>" src="<%= images[index] || images[0] %>" style="height: {{settings.contact_block_image_height}}; width: auto;" />
              <% } %>
              <div class="media-body<% if (imageHeight) { %> mt-1 ml-4<% } %>">
                <% if (block.name) { %>
                  <h3 class="h4 mt-4 mb-<% if (block.description) { %>2<% } else { %>3<% } %>">
                    <% if (block.html_url) { %>
                      <a class="link-stretched text-inherit text-<%= color %>-inverse hover:text-<%= color %>-inverse hover:no-underline" href="<%= block.html_url %>">
                        <%= block.name %>
                      </a>
                    <% } else { %>
                      <%= block.name %>
                    <% } %>
                  </h3>
                <% } %>
                <% if (block.description) { %>
                  <p class="font-size-md">
                    <%= block.description %>
                  </p>
                <% } %>
              </div>
            </div>
          </div>
        </li>
      <% }) %>
    </ul>
  </div>
</template>
Blocks in bordered columns
View code
<template id="tmpl-contact-blocks">
  <% var getColumnClasses = function(numberColumns) {
    var classNames = numberColumns === 'auto' ? 'col-auto' : 'col-12';
    if (numberColumns >= 2) classNames += ' md:col-6';
    if (numberColumns >= 3) classNames += ' lg:col-4';
    if (numberColumns >= 4) classNames += ' xl:col-3';
    return classNames;
  } %>
  <div class="container py-4">
    {{#if settings.contact_blocks_heading}}
      <h2 class="inline-flex align-items-baseline mt-6" x-data="{ src: Theme.assets['contact-blocks-heading'] }">
        <template x-if="src">
          <img class="svg-icon mr-2" src="{{asset 'placeholder.png'}}" alt="" aria-hidden="true" :src="src" />
        </template>
        {{#if settings.use_translations}}
          {{dc settings.contact_blocks_heading}}
        {{else}}
          {{settings.contact_blocks_heading}}
        {{/if}}
      </h2>
    {{/if}}
    <ul class="list-unstyled row row-sm justify-content-<% if (blocks.length > numberColumns) { %>start<% } else { %>center<% } %> mb-0{{#unless settings.contact_blocks_heading}} mt-4{{/unless}}">
      <% blocks.forEach(function(block, index) { %>
        <li class="mb-4 <%= getColumnClasses(numberColumns) %>">
          <div class="card card-body h-full text-base text-<%= color %>-inverse bg-<%= color %> <% if (block.html_url) { %> transition-fast hover:shadow-sm <% if (color === 'white') { %> hover:border-primary<% } %><% } %>">
            <div class="media">
              <% if (imageHeight) { %>
                <img class="mt-4 <% if (block.name) { %>align-self-start<% } else { %>align-self-baseline<% } %>" alt="<%= block.name %>" src="<%= images[index] || images[0] %>" style="height: {{settings.contact_block_image_height}}; width: auto;" />
              <% } %>
              <div class="media-body<% if (imageHeight) { %> mt-1 ml-4<% } %>">
                <% if (block.name) { %>
                  <h3 class="h4 my-4">
                    <% if (block.html_url) { %>
                      <a class="link-stretched text-inherit text-<%= color %>-inverse hover:text-<%= color %>-inverse hover:no-underline" href="<%= block.html_url %>">
                        <%= block.name %>
                      </a>
                    <% } else { %>
                      <%= block.name %>
                    <% } %>
                  </h3>
                <% } %>
                <% if (block.description) { %>
                  <p class="font-size-md">
                    <%= block.description %>
                  </p>
                <% } %>
              </div>
            </div>
          </div>
        </li>
      <% }) %>
    </ul>
  </div>
</template>

By default contact blocks are displayed on the Home page, however you can use them anywhere in the help center.

You can display contact blocks on the Home page using theme settings.

The following settings, found within the Contact blocks setting group, are available in the to use in every theme when customizing contact blocks:

Setting Description
Contact blocks style The style of contact blocks to display.
Contact blocks color The color palette used for contact blocks.
Contact blocks heading The heading to display above the contact blocks.
Contact blocks number The maximum number of contact blocks to display.
Contact blocks columns The maximum number of columns to display per row.
Contact blocks image height The height (in px) for contact block images.

Select a style from the Contact blocks style setting to have the contact blocks appear.

To display contact blocks on any page in the help center other than the Home page:

  1. Select the “Custom template” option from the Contact blocks style setting in the Contact blocks setting group to ensure that there’s not a conflict with an existing micro-template.

  2. Copy the HTML hook below into the position where you’d like the contact blocks to appear.

     <div class="contact-blocks" id="contact-blocks">
       <script type="text/javascript">
         ready(function() {
           Util.renderTemplate(document.getElementById('contact-blocks'), 'contact-blocks', Theme.contactBlocks);
         })
       </script>
     </div>
    
  3. Copy-and-paste your selected pattern micro-template into the bottom of the footer.hbs template.

The title, description, URL and image of each block is configurable through theme settings.

Custom actions

Using custom JavaScript on the page, it’s possible to have certain URLs (like those starting with a hash tag) trigger actions.

For example, if you wanted the Web Widget to be hidden by default and then revealed when a user clicks on the Chat with us block, you could configure the block’s URL to be #show-widget and then add something like the following custom JavaScript code to the Home page template (home_page.hbs):

<script type="text/javascript">

  // Shows the Zendesk Web Widget
  function showWebWidget(e) {
    zE('webWidget', 'show');
    e.preventDefault();
  }

  document.addEventListener("DOMContentLoaded", function() {
  
    // Hide the Zendesk Web Widget on page load
    zE('webWidget', 'hide');

    // Add the required event listeners
    var links = Array.prototype.slice.call(document.querySelectorAll('a[href="#show-widget"]'));
    links.forEach(function(a) {
      a.addEventListener('click', showWebWidget, false);
    });
  });
</script>

Related patterns

Article lists

Article lists

4 patterns

Content blocks

Content blocks

5 patterns

Custom blocks

Custom blocks

3 patterns