Using HTML Result Templates

HTML result templates are strictly based on HTML and JavaScript Search Framework result template components. These templates do not contain any JavaScript and can be modified through the Coveo JavaScript Interface Editor. You are encouraged to use HTML templates because they are easy to configure while still offering good flexibility.

When creating an HTML result template, you are encouraged to use:

The markup for a simple lightweight HTML result template could look like this:

<script id="MyTemplate" type="text/html" class="result-template">
  <div class="coveo-result-frame">
    <div class="coveo-result-row">
      <div class="coveo-result-cell" style="width:85px;text-align:center;padding-top:7px;">
        <span class="CoveoIcon"></span>
        <div class="CoveoQuickview"></div>
      </div>
      <div class="coveo-result-cell" style="padding-left:15px;">
        <div class="coveo-result-row">
          <div class="coveo-result-cell">
            <a class="CoveoResultLink" style="font-size:18px;"></a>
          </div>
          <div class="coveo-result-cell" style="width:120px; text-align:right; font-size:12px">
            <span class="CoveoFieldValue" data-field="@date" data-helper="date"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>

Visually, this result template would look like this:

What’s Next?

When you have many result templates, remember to add conditions on them (see Understanding Which Result Template Loads for a Result).