Search suggestions

Display a curated list of search keyword suggestions to users in order to help them find helpful content.

Suggestions as badges
View code
fefe4b2e1c527d6da9e6cc06e2454303cb8a99cefcf8062ce64fe3413c312ccac02a81f6de23b6d762340fb550c70eb11f838af24fba7c171e2c6d8aca9278d4d966334c186504b4f57f70f6e8456200497ece51afa5e338d7168f40ca44a94cffdb504b10a16925897271e2c6bce583ee343f386c1e095643aa43253140325ef47f613e6b6537b33838879ef12e66da0afa2fc79b129777fbd28feae894b6650f756f5b686dba5f07e0c47b1627b5640e1528136bf116cc9d9c5521226e8592331e5936ff100d2ec7447f90a2c753068663d65720cad29a5ac5367ccb870e92414e1c85b1af150ca4993fcc77226343c359832f570cbe7c0469995672dcfe8813a6b0c84b9ec0cc658d5e909cd56ed0d2f93c754fd07443c3f5896b8fdcb5958f5e7a6f82a288b7fb126ad302f1d0cf9e84ea298c597b2777fdd3f7eb1378937bdd3e13e65b9ab0b8351146eaf6260b8d4c388b0912ce9840011e4844346ebdf97a5390f3138186f3d880606d96f7af59a609be40207a267acc45d701c854cfd813565897cf9324ceafc1326a63e30fba4214ee9928076ddaea7572c5dac7fd1024ea7dc0dd1cc2ae624f779fac16aa260d3aa7a2056725d7fe5847ed61953c19253f4f6dd4b9eeb69ee02bad6ab3e1e3210d4ea8d6b724f39df1d53e83fc7bee7d48644344a1f7614327c637f51238441dedd3bec0165ec906ca36d9c8303aa742aff483249e7fb97d1624a1a1ab43285d3b3f03ac37270f7db01ca55ecfdad8aa9bdf21f9af4887f402a372bde067fbadc7fc46fecec26d29c34963a2af45061939d88ec6555ea01a62bf9f7509a168f4e0897475a58af4fed6b117f49e62702adb025de096bff27a5db0baa4e3e1cb8364f643524c35acee1c8cf953af79d95554167505ec9d3c042bbcaac365fb610122d0aeab6b3a26ec33d61d991fd7e07d01dcf23758d9aa7036df3221f3826b54e23142c36ea627444947f4462b06597ee2b8a91d1d49b9e4f194cdc686b150a01c7b20676cd0396e557422b25a8f4c7579a4289d26a8595bc8b1e08168e04ce420577182f521b0a72ca750e40c967bcc126050572c2d0400be4a6be0d9bd6b2e5576a5346c20f8ac9bdb0271c84ce3e85a93d28d9624ab5c4cc34c3768b485a0cb0bd871e3bc1d4896199f2a14e4fe8f6c2132b14b46aed2c39985f6cbb43c66b6ccde0938ea40b8cb55536363ef8bbccdd4037eb991c8c06dbac179a577f6a7852fca0a9bce188f2f49c5a7973045fa63b245d04d676ea1e23419dc9dfb798c30272ee9bb22843144585e10c76275d64b9cdab1cb30340eb073dd4171d7afb2e685bb39696898747345d73e716e2b2bbbadda01c22ccc8e5900375b19484ccf7c703e9c53dc628be6eed21c84e1ef81ff364b21c6995fe762baccb11b3128c08c9e97f8eee2874da6467e0c7781ab25c1a479dfe5cad98a9bdfa7a45f6ea3c003dbce814db8b50b37604cbc0bf9fa140b29015ded6340f74b5f5fe4e23b5b3f6c5a048f3d6a9ba1b9f62af7729820d79498d6b3986f0e442e6a45e6bb65b78de3eec7c7e55af199f82bcdcce5a46350c0e38e251f91f72e3c5ecfe2191ba794d06489602418265cae0ef7f10e768c63feb12713d141cd4248127752733d8f33def571272f2efe96521cd97d390058b8980a235369c7ca3178912058185976bd1239d5c898847eee2e8448b57138b2070acc1b9df8e55d7e2adaa96be1f730192d417bd1f3d030dd46209371054535b8cfbb5c18ce3ccb26cac786336789d127491fe4b6dc32ed6f18a9a7a85640e67c8c1a8cf3e231595717145608143f45b050ae9792f8c1d8e46a3c62d766d7c26a2c793fff74b97a58caa573667d35b1300cd8df99501ed369dfb4226cba75c45167a738a30c2131b592a972e492accd5c114d11c13034b0534433742873599a84341872f4f3c56843768e3df5592b
Suggestions as badges
View code
21a1ac50c5fa536eb295f11d9c3d4d0f40c3de4b4ce4a7da5d878573426fb7f03a2294728288f24a5e1a59caa1a0a3a79f6e2057e7e25640500c5c3c60df576e2fb6fc1c9e541e7c6ce2268fba615819766f874a4634bf86d562555709d1f51e39a10a8029f3aed3ef200ae3a5cc7611220b9fa0896df5b60e5b9b208722fc3970d8754737049f0295eb7f2c88a751aa8c0b8f12d737ac44ddd5542aa128be1c22592c01de1e7e06dc9413a89b33d4ca8f9ad9eb86e55bed2509f5264f45cead62878f5c64a8b701353102a262c194ba1635934b5d5e9a1fa3668b050ab3d5852cc184aeea5e020250823be55f3bd971db67acf3100d50e8a444b1e15243d49ce1c4bf081a0b4d36aa365f5f5e15dcd5b3ddd288e0575b51371fa8e235cf732f8be8ed72ec7aa641e592b92206dfbd9ea5889e0b776fcc64cefa0409f9a3fd1842c1d8f16e917915ce30a43bf292b0a6471e3584c378682f895ca5e612701d58837535cc699da13794d7e24a91e370878dab505450b1d91a30199908dd8f846c1f96b1c596706a13547accdd531f14a3f373947a0d1ac21b47061e0779111ce89f3d47dead22075a010c48d1202bb712fdd8b8cf6cfb09d06e1cc4324fe42e0e3ca8b0ab3bd24dae5e28f2b24986c572594e8cb88385aa74993d7533598cf7829ff42f4e8ce430627fd7345ecea4726c75a9f7b1d6f4883530b2d0c755d7c99f9b75dedc8df384172db2fc61468c567f78a48adb9b4a7f0b1c67ede31ccac815379d74d8ed6facf23fad5e517467a55a45f1938043ba4b7b3e512933650a858b8852dc301a4d58c0aa3b429efe75d80417dba0c5612077ed94d6ab87fd8b4b1970702024e72c10ec9dbac69db3911a93c47efc46d2fdc3a8ccdaf70e7041d6e93049c9b6fb376e84b2eccb00035de911c11f7b9fcda81544e0e8ef1a34399427cfec25720a23c2d212c418101d1074c675feedac2f0e19c85ca7e7d8672ad672fad3d3007b692901001b515161b2eb77477c0cf80e792eb3fbc73938057591c281bf124622e2d136cfbf2148090462d30d167617429fa88215c2e6954502855dcac41329ee1bfc59ed666f4cd1d77fc464f02b2f55617e55ba90a8d09fc86f708916360807c6dca3a99fbd4e36bbf9e1de037df0cd5942a15d281a0a34d68e624672616ea605144c9899447e6bcadb1c4d8b37da35e7be06546763732ed3e3f87dc26dc7baea28cb19a5a85b16b0d95bd92d917c71027d5e885402512e55d4178107d6f0d77e11643b4a27cf3938a9618fdb7b608737f3ad4344a2351a2771381e54db9449bf9530f8ae142e0cd405dc1599dd5ef26211d449e9eb7fd3e316a787e857180ac8071d7ed77a3f2f4fbadfbeaa2e98dc39a1617077075f39b527bc620017a4e1327de1508e7f5e67e2c842b118032a474f833f70c31894f11ea1cc7a5b4363ebbf287a50fe101f0d0c5a3abb79cd88ea2153f5de718327a710946cd8741d836657a3e7234ce8b6bd465ac24195128f270c4eebc7c22908fafe50430ccb8a7049e43a2d68f571d23d30291e279de3ffdddd1c22abd8b4ad0708e33a12dc8a3b322da6ca18c0d0b9c02cd5983146699b3aeb1b8ffc28b5cbdf30b80a7199530fa6c60ee42699f1e17b7234612b8b4334f26a3e3c9b63595928c255140e6d108ea1c9817b7fe913e339bfe1de1e1eb71d03b54720c2001bb351dde06357bee35c6b4b0ed4f4fdd7cfdf4daf8fddd2200835e5f77e74df0c84bf60cffccfa4e6d2b691de9e55c27062e6b753b5027160cfefad0e5ee4d3a6c9a8804cd2cf234057d11c0b5d0975c50b031208dafe54053fb049567581de87653e0e8331ef25b239f5258ec28b5b3e2353b36fe15f7e77365847d71e15033ff18be178985287cfcee629f8eacd4914e9552e6224b6799cf16c83c39f88d282e5393d9f84b7fc5e3f0a7367863df4d5970fbbd344

Search suggestions are designed for use with the search bar on the Home page, but can be used anywhere in the help center.

Search suggestions can be added to the Home page (home_page.hbs) using the Popular keywords theme setting in the Home page elements setting group.

  1. Select a style from the Popular keywords style dropdown list.
  2. Enter one or more keywords in a comma-separated list.

The search suggestions will then appear below the search bar in the hero element in the style selected.

To use a custom pattern, copy the <template> from your selected pattern into the bottom of the Footer (footer.hbs) template.

Search suggestions can be added to any page by copying-and-pasting the following hook into a page template:

{{~#isnt settings.popular_keywords_style 'none'}}
  {{~#if settings.popular_keywords}}
    <div id="popular-keywords">
      <script type="text/javascript">
        ready(function() {
          Util.renderTemplate(document.getElementById('popular-keywords'), 'popular-keywords', {
            keywords: '{{#if settings.use_translations}}{{dc settings.popular_keywords}}{{else}}{{settings.popular_keywords}}{{/if}}'
          });
        })
      </script>
    </div>
  {{/if~}}
{{/isnt~}}}

The search suggestions will appear in the position of the hook element on the page.

To use a custom pattern, copy the <template> from your selected pattern into the bottom of the Footer (footer.hbs) template.

If you select the Custom template style option, copy-and-paste your selected pattern template into the bottom of the Home page (home_page.hbs) or Footer (footer.hbs) templates.

Related patterns