Call-to-actions

Present the ability to submit a request to users in new and exciting ways.

It’s possible for end-users to submit requests through the help center in a number of ways. Our themes typically have a link to the New Request page in the header and below the article voting buttons. Call-to-actions can be used compliment these links or replace them.

Banner call-to-action
View code
<template id="tmpl-call-to-action">
  <div class="cta relative mt-6 -mb-6{{#is settings.bg_color settings.bg_color_cta}} border-top{{/is}} bg-center bg-cover" style="background-image: url('{{settings.cta_block_image}}')">
    <div class="container relative z-10 py-6">
      <div class="max-w-lg mx-auto text-center">
        {{#if settings.cta_element_heading}}
          <h3 class="h2 md:font-size-3xl lg:font-size-3xl">
            {{#if settings.use_translations}}
              {{dc settings.cta_element_heading}}
            {{else}}
              {{settings.cta_element_heading}}
            {{/if}}
          </h3>
        {{/if}}
        {{#if settings.cta_element_body}}
          <p class="font-size-lg">
            {{#if settings.use_translations}}
              {{dc settings.cta_element_body}}
            {{else}}
              {{settings.cta_element_body}}
            {{/if}}
          </p>
        {{/if}}
        <a class="button button-primary button-lg my-4" href="{{page_path 'new_request'}}">
          {{#if settings.cta_element_link_text}}
            {{#if settings.use_translations}}
              {{dc settings.cta_element_link_text}}
            {{else}}
              {{settings.cta_element_link_text}}
            {{/if}}
          {{else}}
            {{t 'submit_a_request'}}
          {{/if}}
        </a>
      </div>
    </div>
    <div class="absolute-top left-0 z-0 w-full h-full cta"></div>
  </div>
</template>
Boxed call-to-action
View code
<template id="tmpl-call-to-action">
  <div class="container">
    <div class="relative card cta overflow-hidden my-6{{#isnt settings.bg_color settings.bg_color_cta}} border-0{{/isnt}} bg-center bg-cover" style="background-image: url('{{settings.cta_block_image}}')">
      <div class="z-10 p-6">
        {{#if settings.cta_element_heading}}
          <h3 class="h2 md:font-size-3xl lg:font-size-3xl">
            {{#if settings.use_translations}}
              {{dc settings.cta_element_heading}}
            {{else}}
              {{settings.cta_element_heading}}
            {{/if}}
          </h3>
        {{/if}}
        {{#if settings.cta_element_body}}
          <p class="font-size-lg">
            {{#if settings.use_translations}}
              {{dc settings.cta_element_body}}
            {{else}}
              {{settings.cta_element_body}}
            {{/if}}
          </p>
        {{/if}}
        <a class="button button-primary button-lg my-4" href="{{page_path 'new_request'}}">
          {{#if settings.cta_element_link_text}}
            {{#if settings.use_translations}}
              {{dc settings.cta_element_link_text}}
            {{else}}
              {{settings.cta_element_link_text}}
            {{/if}}
          {{else}}
            {{t 'submit_a_request'}}
          {{/if}}
        </a>
      </div>
      <div class="absolute-top left-0 z-0 w-full h-full cta"></div>
    </div>
  </div>
</template>

The call-to-action background image is not displayed if the background color defined in theme settings is fully opaque. If you adjust the opacity of your selected color using the theme setting’s color picker so that it’s semi-transparent, the background image will be visible.

Centered boxed call-to-action
View code
<template id="tmpl-call-to-action">
  <div class="container">
    <div class="relative card cta overflow-hidden my-6{{#isnt settings.bg_color settings.bg_color_cta}} border-0{{/isnt}} bg-center bg-cover" style="background-image: url('{{settings.cta_block_image}}')">
      <div class="z-10 p-6">
        {{#if settings.cta_element_heading}}
          <h3 class="h2 md:font-size-3xl lg:font-size-3xl">
            {{#if settings.use_translations}}
              {{dc settings.cta_element_heading}}
            {{else}}
              {{settings.cta_element_heading}}
            {{/if}}
          </h3>
        {{/if}}
        {{#if settings.cta_element_body}}
          <p class="font-size-lg">
            {{#if settings.use_translations}}
              {{dc settings.cta_element_body}}
            {{else}}
              {{settings.cta_element_body}}
            {{/if}}
          </p>
        {{/if}}
        <a class="button button-primary button-lg my-4" href="{{page_path 'new_request'}}">
          {{#if settings.cta_element_link_text}}
            {{#if settings.use_translations}}
              {{dc settings.cta_element_link_text}}
            {{else}}
              {{settings.cta_element_link_text}}
            {{/if}}
          {{else}}
            {{t 'submit_a_request'}}
          {{/if}}
        </a>
      </div>
      <div class="absolute-top left-0 z-0 w-full h-full cta"></div>
    </div>
  </div>
</template>
Centered boxed call-to-action
View code
<template id="tmpl-call-to-action">
  <div class="container">
    <div class="card cta overflow-hidden my-6{{#isnt settings.bg_color settings.bg_color_cta}} border-0{{/isnt}}">
      <div class="row">
        <div class="p-9 sm:col-6 relative bg-center bg-cover" style="background-image: url('{{settings.cta_block_image}}')"></div>
        <div class="p-6 sm:col-6 sm:px-6 sm:py-8">
          <div class="sm:ml-4">
            {{#if settings.cta_element_heading}}
              <h3 class="h2 md:font-size-3xl lg:font-size-3xl">
                {{#if settings.use_translations}}
                  {{dc settings.cta_element_heading}}
                {{else}}
                  {{settings.cta_element_heading}}
                {{/if}}
              </h3>
            {{/if}}
            {{#if settings.cta_element_body}}
              <p class="font-size-lg">
                {{#if settings.use_translations}}
                  {{dc settings.cta_element_body}}
                {{else}}
                  {{settings.cta_element_body}}
                {{/if}}
              </p>
            {{/if}}
            <a class="button button-primary button-lg my-4" href="{{page_path 'new_request'}}">
              {{#if settings.cta_element_link_text}}
                {{#if settings.use_translations}}
                  {{dc settings.cta_element_link_text}}
                {{else}}
                  {{settings.cta_element_link_text}}
                {{/if}}
              {{else}}
                {{t 'submit_a_request'}}
              {{/if}}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
Centered boxed call-to-action
View code
<template id="tmpl-call-to-action">
  <div class="container my-6 max-w-sm">
    <a class="card card-body text-inherit transition hover:no-underline hover:border-primary" href="{{page_path 'new_request'}}">
      <div class="media align-items-center">
        <div class="media-body">
          {{#if settings.cta_element_heading}}
            <h3 class="font-size-xl text-inherit my-2">
              {{#if settings.use_translations}}
                {{dc settings.cta_element_heading}}
              {{else}}
                {{settings.cta_element_heading}}
              {{/if}}
            </h3>
          {{/if}}
          {{#if settings.cta_element_body}}
            <p class="text-gray-600 font-size-md my-2">
              {{#if settings.use_translations}}
                {{dc settings.cta_element_body}}
              {{else}}
                {{settings.cta_element_body}}
              {{/if}}
            </p>
          {{/if}}
        </div>
        <svg class="svg-icon fill-current text-primary ml-3" viewBox="0 0 190 323" xmlns="http://www.w3.org/2000/svg">
          <path d="M190,162 C190,168 187,174 183,178 L38,317 C34,321 28,323 23,323 C17,323 11,321 7,317 C-2,308 -2,294 7,285 L135,162 L7,39 C-2,31 -2,16 7,7 C15,-2 29,-2 38,7 L183,146 C187,150 190,156 190,162 Z"></path>
        </svg>
      </div>
    </a>
  </div>
</template>

If you’d like to display more than one call-to-action element in a group, consider using the configurable contact blocks available in all of our themes.

In sidebar

By selecting the “In sidebar (right)” option in the CTA location setting you can have the call-to-action appear in a sidebar. Most themes support this option on internal pages.

Centered boxed call-to-action
View code
<template id="tmpl-call-to-action">
  <div class="cta border-radius py-4 px-6 my-6">
    {{#if settings.cta_element_heading}}
      <h3 class="my-4">
        {{#if settings.use_translations}}
          {{dc settings.cta_element_heading}}
        {{else}}
          {{settings.cta_element_heading}}
        {{/if}}
      </h3>
    {{/if}}
    {{#if settings.cta_element_body}}
      <p>
        {{#if settings.use_translations}}
          {{dc settings.cta_element_body}}
        {{else}}
          {{settings.cta_element_body}}
        {{/if}}
      </p>
    {{/if}}
    <a class="button button-primary my-4" href="{{page_path 'new_request'}}">
      {{#if settings.cta_element_link_text}}
        {{#if settings.use_translations}}
          {{dc settings.cta_element_link_text}}
        {{else}}
          {{settings.cta_element_link_text}}
        {{/if}}
      {{else}}
        {{t 'submit_a_request'}}
      {{/if}}
    </a>
  </div>
</template>

Add a call-to-action to your help center by selecting a style from the CTA style setting in the Request CTA elements setting group.

Where the call-to-action appears is controlled by the CTA location setting, with the ability to add it to the Home page as well as internal (Category, Section and Article) pages.

The micro-templates will automatically reflect the heading, body text, link text and colors defined in theme settings.

Related patterns

Dividers

Dividers

14 patterns

Footers

Footers

6 patterns

Headers

Headers

4 patterns