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
89660c5aaeba067e5c2cc5737a053eb002f793baf66cb9d89129279360e5624f5b0cf15ae4dccda7fd824cf6f8039591cfbb2a6baaa7bdd7575a22d7e73514a93e68cd1a360c61e44fb469f6b45def532887bca5c69e9e011beaa245ca60c9248db8307171f74395104859bb2b30354954dde69d602c134de91c112abc79eed88ee5deea1cd8ba61d31c137734c89f59f2e272374b1c488f3adda9fe34a34daf79c0dc377daefb39f89c6dee5e2f7856348c16f738c58341afe885b82c5859876da3b48e13924437c228e476e3990ca24d16877212c0c7943865f0ad84815e808d39261ed98dc81676912a0c1915696c3e23e30a8e1d9b59340d6ede3a6d65292abec30664a40e54a422de00ca99c2c1bee78159f37266560a8ca34ddb3a3b9c837b448b03ec68b787d613bd4b7eb15bec87dd39d220d2f2262abe5b3426d35dfd3d2b71b7ff155cce5bcf0a0c177ca60d40067ea141c680e72729ea89dc7f25b31ea3de1ac4ac30c35a974d0154a6927a19a0a097d5c3270ec74be6a0a657c9460bfb343977c7e7d1c420211b478e61bd5323c9099d4e9927df7bbe754f385cd2f36b8902ca0b17add4ef3361f73b89b2405a575024b3ba8f6f3390123262282e8d1ad9150fd9df3ac621e5d33d3a7b9daaae9605884b64addaa73386742bf2f3be889daf765f74c70edc934f18d76ef010a471a7e8b6ff63b3bbc4b8450491fdfa135c8ab3d742d06671e4d185fe49fb70ae46ed4f0e246309e30bd232e526b57912c4dd11648b7b46f58957ec2f13798b18213be7f96e6ce30dddeaac4d77280a2161a38ab40092345944ea60904b8a3953fd0c7d4c10bf06da45604de72828829a1a67aad3b7203d3530af3aafdb4689f2e42b32728577d431ea968fa6dba1d2d3e178e40b6ffa3db161d227eb40a198c98e1ffbdb5aebc82ff17cbe77ef14a1d5ee2a0b0fe1dadd425671f9d91efec812aa6be6d96bf909f8b634763fe3b23e49e4e62ca90d359a37c58a9e28fef7b6439a020385158a0a867416295f60e3535b2851cb2b413d0fe27f5d004f6a037c16a301be16ce86581cd3543940643484dce033da2a6983b7d4dc92a30d8a96e53598110dd6e4f9d41a0db68f8fd4286fea452996a6891965cab8d99088e42914076bf2b4a38a8e401ca9e8b6e04187e29ad494f39cda0a454500715b7646a4f7097d50d97b7b4ab9d5005c93edf7c9e3285ec6e68f52a30bda5fcdc6480738f7b514ce2135e072d3f5ab4943367d57e5d38af727b3e4bbd152fb43d6931f8a6a304fa29a06620105c1a4545ca0ceb43881f09221fa2a9d3649246553720b0687b4d6dca5826741f3189f3f1aa71fa44d2998b080ab4319ae833bc30015b7c55e05968a223959c7f6a0541857fa396dac8f93b4c643c881eaa1aa353282a821658f9afebc008b473459523153b48375840037facecabbe187353e29cf72c60a6d89608a65cac8d4c99ca4e02430b1cf0fcd5530d2ba1b4cdc80909cb704925ea2f06c43e824dfa9d361cbf79e43664d42d0ebffa4165c6b75102fea46f98bf88e100cebc4f6a0d7052ca1bf62a9a19a2bc9f6cf93858fc12b8c770cb1fba2ca1a71c9cebe5b9794075f2ab4835321804183c5319a0357364846c998406ee64299a0f7483446e24b46c19fa4030ac886e070b99b07279d548441fb19963fcea349644ad4a998b2c991d2de9a6add39864b32e5a25a83dcf049ff9f501a2ebdf43827c219fe7b4977c9ae7beb7c8ca6a4191b552a1de997498c7995e4fe7a744316f60fe3ff6337f458a5a878f1747b22c2914e95ee06e8e07d251e3810a0560a2ff2efdeda68c6347290776d590482869d10267418e7e348ecd377feb47edd327b997422f67a0563925fd0c4b4a1e64cc73cb7720b232958f4a14bc72e23085f482d5adf41b9691c55823a277e08eeddf44a12a094c5869146197ec8796f29bfe08e4b802324379fec8cac6aecf09d75ce950daaee115dcbc1bac436aca292e0791e447a478c7a6a780f78b99a542a7b2136055a4b7b9b6881361c5b8bb4004e5af7141904c0f0c3e4e53b9ac89286a44588a4a0d824f650650e8ce99ab0f0fa2553cc27acee6ed78c4972c6c2199f4ff43fcc9f33c336bdc62c8ed9ee5bdad8296e98ebddc1d3d9492fa4161854481bcf5c1fb65b69adea496239ce49362d962fccc375dd5716df468bcb49445990bf4a84d8fe87317c48269cc05fcbc00c1188d122447592ac36ed93ae3f819091ade09e58dffdba78dcbeb7ac620c4e057f7e62e8908febd82a79b69b3e98129e085b72ff44dbce9b1f0288237c533d95c85df9b482d91c69bcb685d1b9823d2fb0a46ad2aff0be115523f688de455e26e1bb47968e04a930d035428aec791c9c510a38fc10d49c88aeba02ad77fd2fc9e864940ee5c70d26215c2a12d42f806811aacf0b9add0fe6c3d4ff0ffa8f14cf8bca816e052c3c72ffa3cb91d10145291209482822e6f797d4f6b861d227043707d02d817de7e7c2fdbea6f3f2a8adb90a062ed2d28911f1553812298d142c43a214a575339316dfb70f9f7c3850bc53ccac056550cab88d020e3feea77d81107141459e2a1ec123cc54dbc4ee7bb9735a9c5367c4dbd2ee07bcfff60e64c217dcf0bf4b7d2e5e7b84363f7e7978489d7df21cabc3a3991dff8391ee69916bfe0a3f102d23f24290de3736f08644ca3480244ba58ff1b01771f83a9c33f48cf036a01720e76996263b3d02c9236d2774e74f590327823c4cc2fc92f628a1f91ec6e9529414f97a12b2432a53d6abeda7fe7f65e1c45c9b449805623f5cd70b016c968aa6459baddd58f0db842d13e44903409ac55b1ff5378e1b45925dc4b3fe6262778244b8a75340c7bb03be56d8e6ef19afc57883deded308699d103b8f6d20d3b73b2db248f96435c8f4c1e2f7c031e9c443ffc512845e0e5da8a1bfd66c43b916024e8b478f9e0e7b595a01163abaeb2d8cd020d21a918223626f1d88201d0ccd3d87b033709853ba5ba91c86b61b61dc42e26328242f8d03bd61e9fad0a51f5934f6dbaad7f9e7ff45c86ae18353f409d607b8278313eeafcf3e3903718c55e92cba9be824f5abb43520e5580c1943bf7319aacef5661d7bca5fe2ec62bc337bbdb746eba3d9b2939dcdc65accd4e9a110b36b6d0afabfe8be24f9e2315d8df211468b03cd4f0a02c087670aa4f4028071a09f181f09952728586be312b343de786bdfae10bc00a23fd4a3ad03782fa3a8c832cf110234cd9cfe6842bc5ecf1c4097ffcec4eb7434a94c7bdd3ae596e3c3d064fc66afc1354620bfb637c1eb3d18faa2c28a02d0903cb619bac99264e35573b023c997f8c610cb77ca738c1dd5f10644ebdc729e0e3474928c2cfa9042a78dda086f4360d7824d371602f4466e06ff3b19b06e87ea87d3ac6c79bf01132c512caa870b311e97fe6bb4ce33ba39c92eb78871da844596358df4c2432d27a3c7ae5d20bf7ff96075fe1446c78a1c9f64475d736d4ff9d5cbe7d3a960d52d03e7d063a23d8a8f1ecb29a66e841e1c2045cbfc9694be1f34923029a27fcef057bad8994f1f956208fda7aa72ba0170298330df4b94b97745bc8990179691d12c3365451c601ceaf6d1c35fca25f8a34c64bf197241a51c163f8bfb560736782cdbe3a7645814d18f948d9c214eeff40bd387e8300a2ae4631cf0f93fb2654501b18bf7bfc2e57245068ccd47a3e2fd70e8e1eaa21413265000dd771558f01b95069df8e0e82132312b1da2c539dd24b91726cd23425830773e3db0125e0d96128b9917e21c612913853ccc0a921dde03a47df182c16a297dd8ca698a6ce2af040b580f6e8ded302e5e36c73fa32ee5f05b2f87b94ecd44de5e25ffc63c40d8977e3c3c0473f647e0a55590313f6be60fe8f3e499d39b417dd880dc1ed39b5f917c2e90f97309ea1eeddf4a967c7e7c48aa7368d57f8552456ccce4411de5c3ad6eff2da32fbe10cead1edba99a3b80b2db91acfb4791f9ccc97927ce38dde6711345372b7c46b33db425e2440c61818026faa739a86550237e475ef71a17f93425c0ec251bd67418194f1ecbb835788435bbd6797485be55a748c7678c31d95ef41327a9c322db3c1f12abd3251717126a02d1f466cee5d9a97a5b0638b9c4c5e929382e4e7458227431f02707a8f30a5bf1625727416998912d0f31e32b67b0e25d5c4751f5c357387fdd81891d0c7cf17932d0e50cdc961fa594a483a671a760e47c6cd615860c21ca20e0edfcbf3c0b24245fbbb1b3c28eb18b16e7bdeda0649d0b12f260be92d353f374e6c6bb30e30caed4bceedfc4e22f218cc58fef9f8cdef35b3515067d746fca2c4fd7c5f4aaf0bedf312cd9fe47baa795306676121b7356d457742bc9832a257a0840ebee3368da29c5c8ea49145aaa00d32ee88aa60eeb594281168795999d978ea32043a3b46ef082a81815c7e44d4cda7fd1d7106405da7a936e21229f9f6f3ba004b2908e12baa15116ff172f5b6bb743c66937469ff53ecf8d2a456239fc166abe5ed74454e05f6b99a2d37a6ef69ee49469a16f649a1f4b05d7e80add52cc06e959c14b79d5ec38d9ab843de09023826fdef2c4d9ea0f885f20ba6283b684e0c24fcd16cee62fe82a6c928831ed4ad1f51ad3b7e7c2f3b7cd2e5a66feba0dc31f6b5fcd25a9eb4274878c566a66768b5ac58fa1d9423c864c4ec0cb234604fe7b0ccf414a129463d108dc52c60e0b26bc3a4cf54f3c9a8706b74a9301fd333ee98c1d5ee2494e2183ed55cd4096eee9fd595b2c5b4b09e237e3622dc80b3d97296b0f8b90d5f331a0b86aef6a1b25b58bf1ed254b088416a93af841aa19f60fa146e824889075704f8c5a040bbe9bd6bcf036b5e8c8463c72a359a9b5c9030996fb094eab4034b7e0e37bf4cf88c19c607ab8260f516086623910dde7746c7486da9216d5111e838c8bd3fbfc6624feb4c795fb4ceece0bb6b01d6732bbc31ce18a2c21740b98a13de5411bc942a4439e1253d720cbff20d51e979aaf6ba2df7d1b17e03b0acaf51e6897fae7c345475a17e917ff096134a8ff1cb4588d04b3f8bf5b963635494c68dba1e9b68f18252839bac64d7d094f51803939bafb4da479ac8e27b1697163ddfa3ac7692a958c9e10fa060ec37099f0a267e7ac2b053a06205dcbe8fef36b53776f05a55a560fdd8b5964ac84cc7714565d3b91080ef1bf26b2756d38c6999d12532ac3dd1836d39e7b644a9b30b95ee194236c607949bbdd6111cfd76c004dac4cf44e4e196552c122266a6786e782da06773ab94c5ecd71f4ff2712f11163f9567d5f77f43cfb12f64efb79bb5ea328598308b4ab441f0bed95fbf49e2925b48f73a6a3aaaee0ed7b2e5bd893bd28ef0dad4da7c678c71b73a7b8c8c05d43994c8a26d566a26f4e18533f0da3a65e435b74c4832305eeb03c3c79ac77254b0368cba6b7de54f6109ec7d84f63568ab525fd26ec67dc253f53df51d6dd30b4634fd9c9b86423c3a958edb7b9960f6ac88557872f99e8e5f6350dcdaca46fafb53f5ed92a27645cd7e44859920f7065b66061389ffa9dce5188ee40bf96efbbe16b135479f5cb1775838ce1059ecf1fbd0d89ed49f0fe7cd457d4f0af7e95b521e455689704c44fdab1da87d96680920db0bd8f08d54374a5de5744216b8cb256261004e850eb4e3f416e4f47e7d3b3557227f9dda17f23991938cbde8404777e107e81a845677254b88e28f53233b3dc5f2c726b735d6721f9f1402d95d960302a5f2ee55113b626d89407ed177c8c19f8a0954f58352c35a038a8fee3d11ed94af3aded
Centered contact blocks
View code
57e25fc58c26b920dc8594007c7b1e51aee096a0bbe657f6acea8fa7bea18429058649667ea240bad4fe06bf5f07b34b23fed9cb568de37b1c32fb9ffb74e83c1965c69cbfc13063c919e5a72cf124431a368fbb2a9c31b5862356734d575dcbf33b5b1587e11ad4e5b77c99184a0849ed09cad4f6d3aea34f4ec39721bc6e7cc3b0fce31d8c1af166f1416072eddbfa7182b5fb333dad791fe2d071ffe8e75db7cdf96de410e3eef952fca15305b4d6c907c7da0abd42d3259f150fd93feec54f5ceb57b2044c0592a1944ba9bbb5b1d43e554c42b90cac34ec079680454f9b73442ad386e32ff9411ca77c8d1d5b58d60e2b9035a58b80d545b55699f9f0062e242d0269fd9aa8e46f1fab6b8d682dd8843f20fc4150e1ff7dd6a0312585ae7fdd0f37e0892bed2fcf347f0f4a9101057be291bd709df56409637c510aeb3bf9e0f35080df8eb5b431d4a8807ef291d49fecc851a5c90ae3ef1277eb837fbdc309f92348eedd248d512701810bd1723852262e6c9a39fafe6654515faf5049f126eaab3c69cd3ecd2d9e709673b62d31347a9e8d018d1fdd843f4f76091e3026f70a5ffb026b34f3c69bf6577a959e4311d13e2a7501e8a824a450e64736b7ff5302671f609e065d1cfeed9ec50fecad88832f8b774530e8127695d18efe19448caf25b1d300d08607b29b0718022bc934a0036789ecf8ba7379f6ae624381bb723c94221c7ad27d85a017832a04ab9602a86022e7e58096f3e06715d08a060f475fdab9effc5af579431d1043119dea97ca4b72831aa6670cd731369cbf19634be60708ca0c38a5d38a4d1f71da7866f6525576276269b903219ac4b43b10a63b6c97bebc891448e7ae7da4d2b794dc0deefe7e6c2054e63095b398507a3f178713f0f483d04c9821d56100b6a5ae7481992b0cfccd9753347bf71660a3d904b33a9b1f2dd26f52ec4c60eca2b830aee9cb360808566c20e6131e6acf491229c0bc947efa6b9cac1e407076a317e81cd841e3977c077bb99170462e1def53813d8b8612ccf330066b6d71e08c793161210c1f6292389df0158024f4b3d0c756f2e1803ad7a6b839adba8aed7e1cca5a6a26d3e5047a1587d647ef6b3beb7569c00a6c0e145278d4b187e130ef6cf36d70943074bd52cd7022a4e5b736f9336261d54ea5fc5e69b47daa1661c92c234b1f837e76f3d5b9a86b6c6e7eb8928657f6fc455b15115425579b30a70ea7fe7273e3f62272e45acce8525adbbad7446d9fd24a8976e201351f7287f0b5e1ea4db77b88cc4d5dec635feac2ad9073f301d7ff822164528d43aa65836515ca6aac60f75ff685b044fab770e6fc2d22ea37181006d5fb009238759805bd0a103b5ec51471e5fa3f17659d39ae46c731034bbfa1cb4fe3fd652727495dc304e835288e42c3579c0cebb578590c941d673f7a3e54be83bd0e5165899a6a6e86ce4e70b3383c601d141e782a634d7825bdbd1aec9b68bd96f25f93c9eb73a18648eb8aabec1904bfc58490402a5000fdf172f8f27228e605e32dcd2e87343078ffbad70a800b162c30f04cdffe9701512895cc808e436c588e2feeebb1f9539f69391d1fe14cab9cd83700c57172540563e59902b90a8da980dfe86257e750f82aea8ce1682af70e4cfac7edc0002866b9458725d27a248e9e1a73a42a3f2a87203ac374817ffee95bb4284a4c10922fe98cceea97395ef7e1ad6c992670e6461d55d18b9e5b246d03153f1b5071f1cbced9ddc3d40938b1ac9a1a22afbf7f72ca97d052ef4e6e580e9900570292de94cb977b5dc5774b111793c7d7c7b08c3bb1da2c61acaed5cd2aef4540f620e9286d8a2c64882f9cedd58643c6de47e99c534186cbfc57541bd763aceb7fdc7e7ebd921c41d9a9e7bb17a8b30ecae6f3dedf304d32f0d98a917d18c873e1718337575f96333124739832d168cd4e204708377bb95f59d454966c64d791f47dd78adbb72e054c9593d10f9f655275aa88fe0c101b4599a506075328886eac0b45160c97c449916b837750fed8e6f402a9a58a287ede7d382c27b1e22f631d54014d4d7db5f051809089686f1b2e67bd2e6cc3007026f1c1e9861b14e98a4f89b37657c61d67a8c07df1279e36e3572515e60028f51d44a4f8c0a928c6d4f0c3b62eaf804c8b7d4830662b13d4aed283518e4d20ea0f83f65182624b4ead0a42a31054729c3843681a674d11241dffc5a7a4060a6e964e31f9a6a868fafa46db5eaee039da2b0d24e19da8ce04ea892a9071af05f643fa063b39f193763f64ef1302c9abfd9a79382d7c26c459f15a7a89a34e4b9ff68c0870e5196e3296b5f488f22a8f2dd70e9845e537d2379512375fdf75ffd321e9d9673126a3d6ab583cda4bc1745d8447e2a1cd2808e37f2b88c3c7702c70e3fb85c3ecd1c98f608f19a5e4d6009c4988590c01ac3e86d1591b11f6d55737f1022a1ba20565820a6924c0e57c4b43222831eff3268d379ab1a7ac3d2be69678666c7022a4c7a44e0d42cb5386b4bf8c2c261c430470c9ba00afc42557bbd6994e9ed3b05e4af27976f8c295feb5d09a85efcdca43fd167ee6ed91aefc00ff0488a77879c53b8c9477a93d4671af7232425ee39300729b097b270cea34242b7d9afee0090ec4e22fd932ffa1d75b9e717530a2ebc6f4dbb808b007b6e01e12bfbb9c06e39ac042840c008de43fd72249e51b17f17686429d53cc20cf9214d3c237f0a99e8a0bcbd35f8ec4d7ef593a63330996775b147c8bc383d6c644d9839a0cd67348486410a455939b5933b0c6e7dadfcc7a182acd7ebec1042c854a21141ee7afaaeb1f78c15544003b3da86ba6c3b87ab8f7cdb9fbddd5579d25c32a60fc8da941485f762941738f1cbae2cb9dc93714e2a70718f557df8a45065596c7b65fc8fbb54dc9b869f65fad375b67f7461cfafe10241b3eb2f6e5d89731c0ade945a47b5cb93aa732bb681a7d4f54ca5f1000ae7fe39edbeb6befd0d5e739153189834b7dc89f91f6e1e8d0b79d431c295f057d379480a99bed3f3bf3f8ccb47965f42246e7f250c199882cb63cca57f22d639930392b4fbae66dddc5cefe7a50facea58a2ae95a0cb93015134efa381a4c3a0cb8e88a1cec0e52db8d7ba6ebe49298fbe9383076a23c1ab645fd4d3cac6255876a9ca46f20006be4fb3cdd02ab36fd91795eb8742f0ff56e447c403e495b4e6b9705549e19b18ac024c972f64a896bac4fa69d924d18cf8984dc6a76288a053a414d752715d981fb0e0b3f7453b3d5524ac6b5af094e242dfd956550aa464f3fea406c16ce2122d0aadddd7a39557d9af1dd38017f631ec04171604c09459b097acc9800258c24fe6681b159e2fe6c1d203c3ce984385a8d4f7a2d31f5cc7d4931755e96665805f4ffac980a85a04d7a3f5bb48fd29e32a29e1b349fb25383c82895e92f3522368863ecda614e6a0fa968f67d95bd14dc48459e6da3d8bdea421654c9e99b82c3e15ccdb98bc1e8279388f064a637f7b34bb50cbfc2e36fbe120b2a8717684ebdf262a4e2172c4ab82ec2c92d473059b409c5a90a32146263a542044a1e9cec859f485e254f1c154bd6986d3d13cf519f74811f12e0ef7302b51a4423e381e45ff9dda591a095918260b9fa752220b4e330968d0289104f0c13965533d93e3bd63ffa3b8b743deebe56947bf05a6d3f718b1977d00e3f6e61fe1957e89baafed4b94b1711034b6324b26267a469eb123d5d04ef9d10280d79bf4bdecf37709797abe9b3bcfbf378c0dafa380677cb1f3f63133f709de1fe74379b31a6e8910d90fc0bd815642092922e305f3aa03190211f4bc7c0deb322dcb5b1e0d18d02dd82daaae2ed31591e505da11e89405ce5ea2d6977ce7c88382aaf1d7cb70b5e8591fb138319f2705d700ca5f9577f7b88a1d393fdd601c9f847c99906e443f7689afb97a196262d97f8c9c7f4bbe62b87a79b6fcc5c52e302543fc798640b72ebf2e65492736acdd23b1e95f90d8de09b6552c62d867282f31981506238ee23c3440281bda08c3ee6481b4d8db749981c30ec8861da853716279d2df02ecc0a73d10bfdae74d1718aba670e13530e3889ed62b3491db5ddbfdc8e2c487e9fa41167b9a1d6a9efe5de9859457cc443346cd343eec3d4519b5f93f84eee6221f469c5c7f80bebafbeaa07ac227be4e1b136bbe1f3cb92ec0078b7aa4820ac56774efcac84d5e1549140b694da4da43555e7c8fde11311a50e2c047f221be8dd86348e538de77d5afd5df20e0e9e3ba1e162c1fa705942983dc8efbf8e8333aecab16a5eb7c1fc4cad2e4bc18035d2b5eb6793eab74ce308bf5562ce597ce521e6b0092cf019b93fec9245aabe13a46cadbd4cd2dba98983b3d0fcd9de07180aff83abc869cd8314cbd2359c234334d7876f960da44424b208564345bba3ea3ad42578d07f39a2baca881d37c56a347b27d884f243439a993117cf11b0b53fb668fe33902886d691d96ec2537021c63e76a668a0c84b78230193479c5a102d94d90af3feccfc60e1cc2dc6aa8647e7ca67f282d96a23bb2511b6fdfae353cb2dd26babd7f002b09a3aa9f194162b1b95ebc90a0187888c4d6b3a48821528418734a59c77e6c3085c97f008f5dd3f967c8ba69bc922f6aeff1365023c6eab558babd7bc8dcb9571b8d932517e8393895792f9d6a1fd52c135ecbd4c60dff88b700295aa88eb493dfd11aec3828170977a63af1024444309d065c26b064c5d2a7c216e26aae871733426b982a84fb5fe140e8f10213b9ecdbdb606c4855bfbd4dc6081cc7550843f782cb57b81fa5914b9adf8d59e3325fca480c3fee92f76076d62dc464f2970f0e0f8d37f75c9e0342cbe6c838ff73e13442de50c526e054a26195475b06410293ff4a809f58f7fd157999875e3006fc3af9da5f2e62e2a2defc3153a35ec44e1b2f33d31d4d8d2ec33725d03a515c89255b67ef02849cabc711ee53ed4e8ec96e1826a2e6f3a9415c0df0a94056a6ab4a232bcebe1366b1436056193f62f71f1212ba3780d0924780f4d53eaff85bfb3926a5959195b85b9bfcbd65c47bfae30bbeb95e8525036487b34bc3334e7dd9af316dfc454dbec780484b150426c46b3317c0af8de82985758b0a65db64a77c9ff3559cb1eb466107d8c0c4f9eed68d9542b19a8eff00aeff79601aecff433543b597c45c2b65567e91bef83bc3082e9f1f008b2b40979264bc1d09bdf5b238477db14e976be0713897c33bd636a85047631d106097f4a5bbb556071d97d2a9229bc9c7225607743eaae867b04950e1bc6dcaff42cd93253c5873b1a47634ae2482e65cd979e0e40643af8f576815fdc9a4b29763926f77e0a398a514f56e3ade52e8f7790370cd9d23e5c5cc8f998c478f268f712dc73081b381dafab53bcec86bffe48ce8608fb62a2621a8b6e1527dc555465734cdcc16d5c0616964c77658316ada9fe19e5e153d080e95dd114e5244222198405b8e2565fed76bff0c889283a2cebbf7bc8dd85a0b927d53dfe5bc4b45361510d20e1ce5a31ee8f09a29a45d96186e1d0b99a429b16fcfeeb14cd4146ffeef1938dc5dfff4c89b50337de77a4e6e6fb4d168bd4d3e96ea70a82a479432447f7ab621930035d882174ee76ff5730a8795fa490c2a0ec59a707872371defaca8dbc675eda690ec313c89c8b124452b68a8c3ddffaa9af310cb4aa6db0643218476193cdc07b609b4d34d7385e553856ea0bc53aa774d22fbd79c1ed9c6ec2becba0c9a11c7362428b1379ca9f32179f33ee8b112704e5ed5a98e82f730a5460d701dcf3a44f90bca95275
Blocks in bordered columns
View code
4c6b84b009c6936f3dcaa71d8e3c49a96d4ee9ae1d9ac6d6de7df105850f245d02988df255b1f3e9f246bdcf5113aa961ef2840dfed796016f8688ed96a65147bc4656521b2ad7b17562fb0dc2fd79ae541e9370b34b7281e9162a4738d1cdf2e00deb1035496b222f869c986b100d1e9612dae7827e6375efd795815b662c67c6e7c40655d3f3bf7bc4ee58a9ee77f4fa2029345fb36b4ea6bd190cd29875cbc7559139589978d27e1ba7fa683c0ef8d5269ef7b25c48db3d29aa4873b4b926f091f6f3a6595c3d6103d1aa3c86c5e68a81476bc82108d68fcb182bd3da1b1de647f6ca413e07dc61ccf963e40def5a4b212e3c64f09652f9c27a2ab9b6e072018426d700791ecf70fc0b91a437d1e9019809fe0c3e4f1d7a5b3e11f379fecd2727ac644b9b515261b4380073c61d241a2918010177eadeb8e25d29be136fb1b45b060929cfea277f92360de6be90c34428be520fde9124c6903894e88e825c74d23e7ef4de8cd04504cc37e189e00e6dc2d7394123bb247a014d9bfa3d5fb675bbc8e6385ce2eade24bc09ad653ab250a60f9b5b82925a469ab6e8b371869e00cd5e24c4acddd04048810ca1bbcee3ff2df517949d8c312a65499389782b796608fefef9792ba7175144eeb4c753eeb8fa3d529329f099636be294ac11bc849d7a30ccba4ae0564a2fb837a7c7e8006f476fe35a761c6bf63a1adc55584a1d8cbe5f1e4fcab8cdc49053b76898c515b75a485015026b22e9bb04dcadadc248f872bbc4de2e94bdf3e54eb8ae3e05e97cd97ae5b0116b9161717316ea356ac55d97496a5fff44af1be4f0b120aefea884b3d97740bd29e2eb6fd9eb4d73f83d4ede87800b92471d332eaffd4cd50d930ba9d4e718b1af006a52c73fb4ffb23777ab610ff0eb5eb74cd379ddb0d644add30566a526fac0621337172deda34707f1487c17c85a0adbd5ba57ba6a418a366643561f75b16ef8d996c8f42cd0a0124088643d8c4b4657eedd8e17bad36689fa68040b7b730f5156618d0b6bd5ad0b3d1e6660fc27b81559411b2336c5b53fa0361bc8b7d08455a3ab744194b5ad925e97be5c33f7ff39b30c41e43b1910e063e3a8c810a2c715eaf1fa5692232967b09c0ab91745bec2c05155cd838a32abaea34c28c5a11f1f5286459e62cb92b7896dafbfaa0d881336f37c4deab082df7b8e72b57869104eb54477dc7395f3629366d834b34b990d05eb02a70f4d05565a8645e23224b4dc7b5f9d4c973fafda650453c10b3459c1723865b32accca3013764572be44442616267822ab3522771eea77282052b7824960a025905624110a4bfdd98f18ff65153b22f4ae1d74fab27a2a8b46b7a2ff9446a23e30e5796cd612ed7bee55997a7bacbd88212bd7d0c40cbe3a0e6094a205a5e75e1a56055e3badbc547a45ef5ed0c7711583dc701d8b877d0aa26ca701d73bad4a1f23f2ed19ef583d1b32feb564d4836e1173da935583d6aca95e7c1830961047e73dd7b6be0094cf35ad4e4857375ef134c3e6dfda0702d3963ea1ddecafce77de49c67a9d5c948d46b2d405f673713aca00b8d188c1a24a409ceecebc941d266361e3a44e0a85ee9dd274f6297bcfdc664c6b8836f564e388757faf52ab13e6a0b3a8ccee3a7a731e5f268613b52c229b127158b45a7a918ebf631a8c3995975467ed610bd8baab6a26ca8713f4539bb01ce3a1bc870d10a51e32767b1642b80d1aa4384f97228a7cb75ffa53e6af9e6b7752f42e8e6ed469192f2a3c90fe51260c7ae13871974ba494805321ff686ac421728ac01e1ed53883381ff440d82d4da49c2e8d30166bc0da00ca261170b2186dbfffa5d1daefcc1287eb7f0aca370601863f473406615e3386eb8b2541a2f45f62a3e4b9d10bbff68ae7874f3106dd06898c16c6f65820246e323acfdb5211758474ac3cb59eb5e8cd3af3c6d75ad9604ed5996956aff54549ae5650fe935e802b54bf1c72e24ec9346408f88c6ee2bf29b97996ed505c6f7eecda0cb1684a0e1b201b595aa16e6498f4d02512fadbf0f59f1dd452e3ffe2c12251c772b5e5dfbc3be785fde8210988e37d877d8d54e6e6fcab3ac7300536b572767373a15c2ffad4e550f9c27e12a474ef016317509ae21a81b6fb64eaea5f60f9a8b7e6f30da9ef243760ae5e0c1dc4e7d5369f3f25551851ac5fdf468fbdb4b024666971192285240a13edea082dcd103a3c135040dd4c3defc6c4838ddb58478067db3615ac97a3f8771c3b050117390e72d4e16cc197f734384d88cddfeee35062b414aecce555fcd93fcba756867e2e70e06d0359d742537ceefd5e10782f4529ec016ad6d117cedf21b84434fd49dad11196ee6d08b4d6cb6c3741c2c1f38528d5b8a2688a72c807c1edf4c2af28e7cf1dd05081b9e8ca270c628f55fcfe4a4139cd3bb8b0b8e854603fc29b5b66649bed47b2a91b498aeff2c269393ee9d013c928f1770bce70bd5da5fd7ee3edea333afd0c0fe8d0c7f86b50e0a137ffb7e7565cc05dcf39e2e648ad13e1cef247fb49eaa4abb2b34bad1c42d18b8213a7c84787d42696ea942383c03bb99f048a9479daa683b3df631a380a0f00c86ec17eaf6a4c01fc64d5ee740bef5e5447724d3dd9b0ec05b34122912ee91b43a69d345a3f209ad0fd39d9c5b7e91ed7453cdf382e8d24b73f4f786b8c32f6693876c70268ab5fc5bee5cf56f1605ac8011edb432833d721da02be06f7c3c676d5d8e1f36daf896fc1c9397bc5541d45bf24fbcc19f4b68e731f37eed18500c61cffc21724ff9a2f6339f200ac0546e4ad8b3bcc8c6ac8799568607539ab7f423968c077b22fa0f739e78b8a228406bce957be3bb103fab59b20ee8a80d80f30c9776da2066fa25c8cd15095d6955015fbd9974e3faf0cf2774d895a104e17c97f0880cde5488648f3b957dc08b1620d261eb74233fc4724017b542487a8a62bfbc54b744ed2316c85fc60f2a6093ab0be4f9e6c573a4811e1f7c44b390f8380aab80ed352646a6ffc0f5693b6e79599414f1315f9113c05563a11449bb1d9119b4fe865462e7f095e50ddb46dd7272831bf0bdc8f944c0563379fb257fed3bafe082bab98d9664e5161a1a0635957c40e4832bf59710fbd14fce9aea989611a97f2047d0b8227cdb847f364d623c048dad09aa105fec5d6e38d658b9b766b3ff4b964f25f9ac72d7decfa0c62ec17cf21d09b6789a9c3ee44ff8fcaba74d4e7ca341fb209f3d91451088863bdb590dbf0867fb5497109eaef9af4786f5b1fb1e267f661d9e6801189054aed8d3eed8e704fc5d9febf6f78e1f9208c975d7d6d01ef2ccb819c74dff8ae695dc88ebdd290ed8c0be9027fd578bc04b4ec19fda6d27194683e8a5706a21b60a763734fbe5cf978d4ef4fcc266de3e8c1a9ed498ce002ae5189fa9dc0415dc19323b03e16b3ed6b9d824f8c726eb1727f2d052017b88b49e84605b58156c9193ddedae5cb315a6ec49d569fa8d70715daa5a2bf925b28b2bbf0bc744b076870452e25bc9c3eedc125c833b843c7da87e5f66c0a0d5ad892baad022d94f0127364a4da3d3976b09c4bfaf5b409fdcd5a035733fd96f30c0c2a86f457883e65ab317549e692b5030c40ec31affd829f98203eb017b82bf2c2571fd7379d30abb302353f810f4726f2d58625884636267c69a04adf188cf02bdc1f6e8c6afe25f8050b4e7c0a5caec3676bc57cc596daad3231e5876514cc8c2b9b57c1d75cedab1d8bc465ae866d758b6d9d82cbf4fd9918e094c8e3f0ddaf993cb0a2d532552cfe70230ecb03d639ca0d9c40b57fd32cd2747fc8aa09ee17d7d21ff9919b7ca8ba5ecebf897f8f70a3a83dc71fa9556c40189d8511ad3e0135059aa3d8d96e21c1149501b4f1f1428972ec955394373cfa5b4e8dec6dbdb0bb1e572b0d6b0d55980acb3336118823ff7fa0a8d1f6169c9d4e6bb51f80d130cd97bc8e59ac1d36c1089eb7a18ab6882a6fd8492d89bf165696e6d5e2d44d873821a2a9f0c226981077060b12e216b3615f35db2331b310d0f1cb0157d0ad2a55b629cdb3a65dd40c2cef86266e46c6fa9c060487480e061407dd9cfeec88670f947b48adae24c090996542af50f717a192bd329a176a12f6f5a7ad4d0656c7db52193afd8aef78d98c858ca9e30519389d7648bc429df5f4365b83019831ee5db602ae6986943cd5917a3391156ee07368267db8ef278b89b96974cbe8147bed0872031bc39ee59e7c5144d3afde1996f7d9ea4cbcdb2950043ac5ac3558395da58174068597c2bf9548d1970a2a1e95af34f719d7253555b51ad10b92691bba66cc4a3e70eeaafa322f8feec40c935f250cc139bf5b3ac3c1200f270e1ffad1742e7b5816d63fd681ba5ba67333db3222f550a3e3351651d41cc1e89343e97629361704dc571a6490cae9a03217eef213a39dc081dd2751ea6bc9f76c4b1a2f529e912768bd8ae279b68a41248ac97fd077e15233ec3115daf6295434aee1686dbba1f83974bb96e29a56ad87e85494e6cfa5aa97b94af70428d447e344bfa92cb2359a5ee5c681a9a0a2ea3604e27c30d207322996741abd29f813a0ee6d9e8213b375eb5a8ebdbf8f33e88f2a67e329512a2172c0505e8fbdfdd8f412cf909e1fba2194942d9a30922480b79cafa32248bad93ce9d3150b2c8aa3ac2808089cbcbcfdecd7412d8f39caf60d01d90935d9a2d03b397bf60baa44a981cbd9900e3461b2848928732139e5eaa813c19e4866bcfe113884a9f0f6b778200f5e64a04a03ab4817289c1f0e590507a3da892dc9d66ff886873dfdfc8e7c644834b38a86e7350403280b60c267293508f0011dc8d873095bfdecb6e3d4e2c35b3e626900601ec75fb7c50459c16ae2e6f488d62724f27d27ee7ed1444c30dd9970ddd40801d66f1f18abb2bad01be89b85c44d9d851e0bf18a35d346c80d53fa5e08d8beb9cb0c05d90ee82a780935d41a759d81d6b65d5a124093a4b4169c9bb0a724762c127416d5ff1e30e633a975f6c0844be1ede2d1bdca09f398e2a695e46efc8f5c6566b1c0c5bd395a45cce81f0d8cda6182a64aea61fabe5c2b07b3aa6297c1808ffe7fbf6d8896ac0bb7ad8c90a2cd8b2aaf110ada0a09e232e57e535ebc5ea57c785173c59431a6f2578ac71f7f566f3d89028e2017c501d867945b32a824bb10bd616116620570c9bb00cfa107d03f36979a056b551f94b02a297137b88f2accd489fa4ffe114a165e279ea9c4571017964edc9b11c31fa6d52bda05a41f92049d28121a03ec62c40a0f753f2c096b90990e23e0925095e69c8250f9ed7d97030b637439566f58318d35dc8538fa84c885ca7bb04557354e5e5f04e16c3b18c959f98ca4170b006bc3e1385ccbe57873a5df69f565f0327ff9f1bd16c4bcda7fed9c567e69bdb0bdf2f8f3add0c21a7bad057550f1ade88bb315380d1cabee3d0c374f4123e1f80fec72f99ae0bece49fc4d4f79b5acec6a4ecd7227dd24cbb43020a797b4fdc6eee7f2fdf533b8b1d9bf57624edcaa83569208102e782fc5ceed7a3d8e3bfb5b7b14ad8b2e2f86ed886b1d4df61e77a5d192c357d30be2a22831d3ad110c86d4e0203082877189ca4aaf7c2c8f1b2a107a1afd6af834daafda6574e29f2dcbe2316229796e06f9331f1df372887f8ea23d54174ed6862e47b1

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">
         document.addEventListener('DOMContentLoaded', () => {
           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