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
0f9b1c7ac015a9f37edef7a0f035430668dc1761b35771de40196a2463610bc9960219cf1ab9ea265f23df4592245213cdccdb95e2601cf00ba0bc8d04af26aebd609852629eed9714ead25ed44d9bcaf636a7f94b96b4cc4e9c148b8831e7ec938707594adfc49a687cbb7ce7bc728fe4c532d54be8e1c2edbff3f861ee91bf15c63053f1ffc646ba23db1497b734c99be59a891d863c7836e2389c430aad45d96e34ab7622fbe5869f58215d6ff47f718770b8729de27075a19eaf1d451f0134809d2dad6f44b8de319067c8bfb9c16c0918d88518683b4b7f4312365dc9f5379afa37f5fdcef5752bee1242d8cfd7e2cb5932efac3bed34c81255ee8b1ec710a0b64a91ba19671367c3091ed1c34fca0c74a9f72433c6efbb9079558ef29a2f5d3e84fb6295e7683d0ba3fa4f5c79f9c0f82133cb3fc6a33237f2211dcf4c6897f89bda1d7a7214aec5c830665e19972b36dba3f955d81ca27ee512d006df96b79d5b133ecca0a4485213454873faa0bf3b007ab172bf5cf130be36cf97ed6b9f89a1131b8fea3d83748131da943c17fa44d41485258ec574a82006926ba27f0a4c2aef0c586534dda0bfdf2873482beb1f03bbf29c7c21c54abdf25bda6a5dc529e2a384dd250dc9464225305b9adc7b29e7928a280c899c194a1ebed74f60074730a1d00e1b6f10e26e4d3abc035491e6fbb8d3e71fa38a820ae57dc091d951838e486a98fe98c3a56c3548a13ae4a109bfcc1d7e3ee810ac27947362f3185fec73944a4e5f24a2295fb71fc27d55289ded250a243c41dee9b46a527691226589e0183527c0c5b058b3b099b52347f81cc3c5c9a70d573c69ff3814fbf078b473d35fe771e21f4510ead76a0bfcf61b09b711a0c6b33e52069aca5328e49b50c681c480bb9b2ad7fbd4f594fef2d447d0b2c57cd7464f0d27590d8136a9c8d5a8802d97636939f4c53723a507bfe171800d2f1298132d0e61ef972b5f2763dd07445d35db9ec6d8dc499c12e29e6a2e6b31f2b49f5c319db32c6deb96398e86d966c23f31af7c5a4fea28081f4d8e898113f0c41a438f11a6b0df26e935533102efa897ca3ebd4dc52ba077f13a8bd84ea41e237687d9835e1874a54a8dca4239e97c286538d23706ca693e2755ffc3b7d60e99d42ff35f48b7920c0d54c0c0534f954fd87f16894147f59b4e1dac6a0231267a326eac344c252cdde02e08de10ecf1c23512461c4aa57b416b70fec36d5063e70c7f8fdf829c2a064953a7f1c20b942fd904bd6660fc0d1470ac88a9b2e235a21c6ce1d4f368c52ece2402ccb9ba6f442e2e837c5ce2dfef8e61c3d09edc8db0ff9b41e30b79f30e9d91111d1baf818a51698916c764bf894667a56f5f74f5824a309f2346fd0a685ebf9e22069296349707d425adafe3bc4deaaacc90c07df77258fd4c0499a1922964f135956d706f8b02ca5c435ae3d03cd9f503b63f5aceef47f7a2ef92c279d60992d7277ad8b22fa985ff83807a36641065bb5e7b33f2accf26253a008b882b05b0fb4b9fb304951ec9e75815bf0b75e38c45411782a634d8eddf149c9a3ea0747b0bd8352015fe98ed9ba0c5e51f523b1852e442d1ace9146a120a98b32f6f830d55709b8836c93c03b0c0842562d1051a01dbf524b1f73aef37c53d27ab282d113fe769ae9219ba920a01e959875a1065ff1a2ed3be3dcd9f2ee1114ae0530dbcdd73e06275d17e9a11744ea0326d2afb8371334f519e34852e12ec1e859efabe3bcf2a219a93bb260ad46fa8f43d2965cf384b88e7445a4dd3bd11823eb1862b0377ef4df7fcd0f523ef1fcf3de019c5306a1284fcad456a5d2c8fbc78db8d858b18b2adb85ff2f47eedacafbbee75da7fd1dfe6c4c1adc7f64126b027f958569bf0715e4a21fdb6b37ae609187ef695c30370d5b4f62b8f1ebc29138fac8befe41b7c78ece9ccdb7db81c01ae69248c774d1694b7d49160c92ba9c2d5a6d35479244866197ad9116c8e88728ce3795e3e1f026285c2c88f020c3626240db98ed1a5dcbeff9d7d98f838fa9343e85a2e13b55dd3aee62b67ee1fc300e4c821835c7575413f4eff8e564335cc5b9e9366feb7f1366a496eb6dd1fd792387fe837ff68caf0505ad92515c66240e451d4a9c63641daef3d2317de53ac4defe5e5151b81d88f4d7cb3947d4d46a44746d62c4f5943b6ef4f629b5d1bbeda248954b8458291bffcbd82b8da0ff838cc1aad1e4bacf1a12fd1f7fcf6e80e7c177eecca34160c249000fab7b8c13a93a28aed01dcec06b04f4675842eff6774488b48de3f846045d4b914199e107e0c486e0ca1844f1e2d36af07a6fea299c9e7c4cd44babfb1a2c1f9b361d944252648b87029a45a89af6fc936a0557934542bb3bf364da60b0871d205d84b6f99a4d4ab5f7c8170264a7ef647dfb3e99233146d0c7be5b478954ccbe957a6dc679085e4e3f2cc066a79e14d6aebbf5759137026327ab25f6b4fbc6e12524260942b2e15e547456b3ca448a41f3e40ed35b7474cb5e19162ca8800e77a140af691a27ed0e82fe7d56d7d217fad40cac8eb47751ece904f85361e4551d7a27c8b6a5f7c2bd5ede360fef3f2728b42e7bea6e81b3777126265dbab10009835cb4a6db72b9d49cad45ea2c8117addbf7602c8e75625ca2488acf6e42081c94e794e5d33c21e7a57122cd15b24659d78d8845d60c2dbe6f7faccc68d7e7010f6de52e396adcaafeb7aa219b2ca065e20438543b6f50f257c48fdefc5471e52b50d740d3d2f1b92fe034395b0c5922ac6e787a4bc4b335ea3edc0c5b88519fd90d889786669057527c9696e6b711e9ba859ff583bc38821fab817d411c20af449594044a592e8f85ff89e3d0afc2afad01201a291153b8937cbbfb5becb326fb66d677598160cf0279059806fc49f0641f5a8f0b7ac2c60dc59f5ce356d546db49e56b1af1afa79964fe158f25e35fbd88e5d794525a9d42ba4852a480e61dfd7b29a7c2fb902ae7922026fcab4f9c32a4df6c5afc692290a7ab7d227fa2f379ce5d57409a6d0e277401caf56360b15a565f6f9a57307ffaf8e6ad8af719ad9da0556e0055b2bb3ef2d1b61f138259c9cea256dfd2dc9dc15499366e949f6a45e6cbdb9704d1ecec5db9312fd71a0f6ce7556617e94d497e689df0e5fc5564a78013f5a9635055be439a9a5ac98b00006d615afd3d796931d92d4f358296fddd87b5c83e5cb3aabbfedfa44aeca98c8dabf57574883661e6ebabdae73e55873db8295311b26184866e7e6e206c1dcb8564cd1d81bb6799536a2678136da0cbb94643f0e242e2bcc95a277e5bab439d3265820b478e06f8dc589b5fd95be1f9886a4c02fda28fcae34a63cb9dce3190d4401ec3be5d46ca1f96c983ce76d41efebf2ae656df78a8cb835de4824a659ed6e48ca3bf79d1a36ca178b6aac344b8961b77093307c4e9e5118434a8a0af16fe2fe46a0103b1d2b1a3d772a18b0087348023e81703f619ba3b4bd92865672255b4911d3a8ac69da32e77ca0f7653032f2ef6450ffb13642a641e9eff14773ab5944ae50893946f88c43ef75a8af1243a7472eb49a12366bf8bb6089b0f3f86add9a087ef31d25e2edc88b2a4740cc8883e054cfbf3781be5067dcee94bb46c68d7616ea62567df5696d2a05a20d97ebb5a082757ea1a3c83cd4ce164cfe21c8237ddd1511677ff5abb9f33fac9bd5aa944e4e979908da478c867a51c0161594d555874f8633a07ca980a3b46e8fd07295a1393130b045010066b15dfdd29ac3c2d61d6cb54f545c0654ea3cbc1886d36d36529a9e94aa818fd89b09e74710979597f6a44fac034b86e77cc2fac209d528eca33dc7b7ac373fb2cd1327293bc8f2e725696e052fb299b5105ce67131e9a08a0db39a001819371bd5416c2a510047c0cedee1eabdc71da0bec2a005d9bc05eaaf9288e33775538cf90d66702958680e1c17e92daf4ea6b528bf6bd061792a3e07ee89e2f2df550d659bc9c96e1717f29a4c9251e9fd945c423d09dff92cba0dde92fd33749518f1e8a7677a4fb570a33d78cc8ce7d69c9f6fd90b5c5bd72f5fbb82895645668d197dd3ebaada653fbbb35234815f025316f05220ebf62c25bdf4360bf2b17da2ee6b53d975e56cc88c2f23554217df0ee7363b59266ee06600ebd3403ecf9748790985d2dd68700d1cce40cd857066d02fe3a238f23f8074440dc0f8b2c6021b9ee22c4d10d91a6dc1b161d9307d8cb7dfa4ca94ed7c4bce49bfb4b83c00d539abacdadd9805e8ec813ebaca77cb281790d9b83bc5a48572cd3b738677f2e0cd3328833401fd655d89070ceef7e41dcd58ed09623b78543cb7c8d4f13703fbcc62695aec79ec0217a54c90bd5de7ce147d5d29a98ef38460cdba5a781fe8b9c39ee9273133fd6874724f2df4582dedcc57d81ec05148682410bf30c3eb7b2e59ba6e3662e0b6375466b9efa45a83e958af63f5e7c76ba8584d96847db2c7d99e6e116bfec4d9349bdcccadd6942c340e8a87ed2fc3ca7425ec0b3e31ad7b1cf2af3a06b5de84b5ea603449047238effab284c6bd906cb3d3403c502d434e59aa5f64566a20eea2a371adc48e6c5f29d1d16ba6eb4c1c63acd03fe76958aee8587e4ebecd1a391dd6c931234ef8fce5c9f9d0ea053c854132923ae7e9a865eaf70ce0546956f0dc3bab823f09c1038b7788fa175fcce0710f57b846ed82fac671e950cd4a820bc0333ec4efe7aacfc20b83348f4ee3c554b1c8d8cb62f11bf87e72680e9768eb7ab61889343d95b0e42bdb1dd88d1fd813c8fea357590269e851e8c09d6c59eae5b41883bdaef74a6fadb5887460cbae1f4be6bff3b1faeb8e231c00e5d27e73c456d1c9ed8fd3e11873909d3dd659938d9c349583dde4be120772a152fd804144f79caf92fb9a2c5925d789198902712c8bb1914b10c4e8768ed466df04340a388d3f4c03802221e71ae0e28a900b01b6c7a0f312f864c39c37810b8de5c3a3b1449f73a6d0b14e114bb8e53fd1156ac118f4bc362b70221819e04f8bd8fd59e8f0d80cc17fa9f72fe1020b446aeb8d1298507fef633367ef316dcfd877046c7f9b486f3ab4dee6a388a0705b21b02d714fd7f9f5ff71f74110976aaaa2cbf3ff01cae098bbad7febb6e4dc4e19009a86af03d47569aace27a3f9745a58a6f6167ae0f96bcee2f3943828f6ba9a78a2eab8f461bf7f52df8746cbc073b709d47c754e17967bce12ed5ef2311bb2e1b3f4d6e7ec5f733f98295d57ef8e14cb56f88347041d428ede0cb232e8be7e6babffc1133d6d438d69ef69a19711ae23211c7162fc893a284e95c16c09ecf3dbc9be1a588db18760d4cf8c652be2648bd4269bf951a7014f3c79452e0d493a28b372283bd1f6a7746b2ed75c88bff910370ac9856ffa691889f018437836ab9951a5c51e551beda88eeea3cea3ba1ab83553ddb474ca88b0a5c754c84b6ff7548daa3b0547940546b9bc3d442a436ba7b8eebbca754c529d8383d6e75221ce4fb1f9f811b3d48ead848aee8d5c8172f9149d6d69effbdc0a5409350e45c37cff8de57c5614d31203f2bae2b3c4d3c437910e5b18acc4c73679f51ed650116ea402cb51c460e7568bca13f8aa5c8502abd5426a3a26d878a3a5144597b727f50914ba6f9b54c5261f5812b3effe0cf05c71d10db33ec8497bd6cbea3b48816194cc8fcd62958984659291ecae2fa8d602fa28df8aeb26e92b041c83cde5f868db87ec708cca8ff81f37621e6b1dd17900369dfe4cb32a25a4f9d7ac54432aad1dcf0422dc935bf06c79bd6ceafb26f4ec46efeb0d5af9c71a60ca
Centered contact blocks
View code
9ff39bb8fc5c9b16bcdd39c028552579cff0f7ce0c6e98b6f096ea90581e797ddb8b908bffeb1ee68daee02ec1fc0e9e52a396c3401218873e7480275560ceede713f26fe4afbdf7a01bc079171e42ecdc1c4444f39731813bf5ec677a1b4a47f3e69439e4b00444ccf9f43eb16457025377bb6871c42dbc9b64a0a5d45fe8bc77fe7676a0e7cf38d1909da862cfa3e9c573092e403dc5f0adc122e25e5da049df86d5d5454784ee4937d8f748d8bfccf1a186d5e5914a6972aa9eaa4f8abb05be71ae290c57db4fc344a25bba0833f65fca415f4fc07f17576d01adb4ab6f69693fe9a46ee9baa938f7a17ba23de27cd8a29a2cd7b6409d77dfcee09366fdeb4ca88d2fbd07c8df95f15d366ba222268e744c444fa09c5b55791afbae00839ffdaa063520ffd922a8fce34f2d67e9ce618acc6d8a88cc1ea155aeeb81de0c1ab56790e0f58465ee5c4e67b4dcdeffbb5bae47d37411a16a3332f661934260f07d254add291dae8cdce7d72918a1df2603e73c5ba04f7e4c98c2050904ec76368c5255f544e4601399f127498315a6841f5ec2be43533f79576ccecf89920bf05d06c7a2a5e51bf0f86cc1c98810b262c49fa174afd14154a4b31efb60fe195150e01e02423123bb4eacb0bb84c4d88d391ee76e69ec2399e37a7abf48a6fa7cbcf872cb0e34e850afb4bcf1d9f303422e7c87d2d215a1d8cf4facf67baca6abe060504490b98433478d2909bd9f4c7815fc3f246282d7fc6037a351d73c647a6cc241c9da35e76ff6687e709d724705593c7cc011a6acab8448d7de5fe2d92359050f4060ed5f59dd36dcaff3ee1ee72bf7f41c884633515ec948240ff379cb6e7c2161c42eecb96724e49ce54744bc64e94dc293438bda19c00414afeb5c101c71a85ec2a018cb911aead045cd0928c5781b76d5f0b5e2c408c6b7f33bab78b69c5845e6cdb5a287e3040f02865e2e78011719be8670699617d68966d42ec4bb589e5b9b7c313606097d4e8809255ad314f72d6ac4569c4a16585b547d45bf3136c110be9494f30a56016be291a51de1fcb2bc2154e369b582e227ff0bd38b55cefa854600c438fc036035dcab2d991bf46dbbf873ba489dc6998a03973ca5ccdfca0f0acacb9b20c70a8358e1d04aa5f4f548c668588a32d0a72e08c413d061e714937f1168b04f3fd3c8194661151758815de74f6ee0ee2901d8224a55d15572fefa1dcbc359e05da5ae0b3676b5a2a97516440510bb308576609bf23a5ba5fa25ea7ebd8fa4a8c5697b64a5bc46cb098b284ad26b3f4881d335ffa44fb055bd5ece54bca665ba804203c95c194b32b2c6213c5e5eee0e54540c9b27f889d4dcf3e4db44e5b1c937cc88e68f66dbe98582e940697c7cad1ba7c9688cffca6809e5393d81505cf8130b323010c4e2022aeb2973c67bff9e74246527258ea295ab38423b8acd31d3c9d5dafba2527d6475e1bf2b1480e0755de48265cf522f329419ef5126379dee158bb4a500bf4e1e54776679bbbe25c98825a8eedd3eaa6f25fd6850ff31d1665e739888b4f9a9cdaa9a78937d06730a0be7eed863cc3dbbe98df903ab5ab2fb27cfdc7114b467b72531a405135f0e020cba245918f6e89203d2e4ea9c70fd4a87de3de874f174d313c8c79af4cdb508abdbec79ed50ec364174723e357f0d16927802118ddca82bb1e04401147837a3146444c2f632ecf62d8db882ab2a7bc0d3a056c98c24c100bc4451919eb37445f2172f5b469241f736726773d3b2d7e4a615f1fdb3d88098a51e041aadea88a2337a48f4b1f8300d50421346e266c041aa9dafe4134e1e4d7ada1c225b448ba61a421f6278ea02723e79dd4cb2ebb0cd8deb564e85f868896ec845c6161d93f84537d2d9aeedacd8827e24be8c99275f724754d3c6442d9fd585de3b2e0c7dea1f0febcd1fd4a35d96f8b7baeb8737780c82ee345e23c1810600eaab3ff3b26eef4bd2de4b17c0e073b058fa9399768f1c556fa12eda1d3b7308f6f82c0e9da8bbc53a9ff4bbf0d0ce76aefb336977584ef17c598200ed42bb43a8ad9e5392d007343d6f432d6d79a456e1238aff488e50be95614dde51b2b91810698178d2c1909055350bb22150834fbedbd844112eec92d5c9dea88b1e024b7d9a6dc9c68b83d5064fb980a62cc8f35df9947339940600922422c4bd49837606641a35185a0aea00c1c8bc3ba460bf005c3a0f435417187eee0282fec3dfd72ba6e50d84661bd4d2a0ca685d35eacba9bd9318e1e2e1d7f4138aae605c4540684315d39c1db3aabf4c7ce2213335ff36d18fd30c440d4757d8beff6ff8da52fca81df4e2fed8fdbad9acae6179c34a52e7df5a23e152ae5c2407cb489c395f70487f3cd0a54389e05db7b24b40db1eb46226cea68e5bfa75d2c5e65dd861d361c17fc00599937343321090c79df8b6c1fddbb8ba23694738533f35bf68ae59ecc312099568d7126991b2760e5c450ea2813ce6b8a9a902723c3001ecfe11e81980c2912ebc2eb243c396b94a435f922e346f824963212b059eaacf4223cf1ea85e6b8d2001c47919fac9880dd4deabc3b91061a2613357891bf3e73f7782d2128bb5c50ff30687546b3a34ce5a48de36f311213ce61d2313bf418779fe9b0bbca8834ab008c50f0be10133adb35851837f6aa1aba502bdb8fc82fb6b4838acf4d0a16cce9bb57fa815a22ce3bca903decbd5a9948060a31efbce297b57c82146f527e575f4ca30ab1cb14029cee4831b44a24317f82af22181a4f7056dbfdacedcc2edfd6110cbb0119e56d63abaf2819e63c5e2be0275cffda8f59eb6914e61cdc82449fd3a93660cbedca08f5369149f86b2e9219b45fd6e2e45be824d0173799983d632762c823a03ee6903abb72c17e6e654ef802997e0c6931ed638af8a79ffb23b10639f08a33845603171562a2272c36a941f88fa64acd97e12556310dfca6e226ad43ff5a298af89c110115155da0b62cc41dc91b72d571016fedf6157a5020d712c30c3e52e5435f4fe41e29ef714585721e8a0f5206994abd6dccd7ed1d86cc878f06b97720e141ec4503b65514024e07feba71f5e6484eff34bc31ef1f66c4825c547e1e171f056550bf41aff2e28b6cc6b3651ecd85b8cfcd03ab23c72da0de777a6a612d278eba0a692f324c4a3b5ba600f951735a30f394f681076f8618839e8a9cb37f84a07651cb03c8315be5c5ecbb2aeb13731be767608c9f067297f869659918b3b03e71c6cbfd92f6f5d327fdbd9dbe62e1c50b786610e740d30e0ccda790b1e8260d0fb56e6a7c63561b31023ac31aa562063a43b968f140634dbfa93156f634228cffa1b134b848253c1983329ec63e3dd87ea7dc4288a9c9298693980857e08da262765f7fa2d4435460f1f2fd5860fa4fa526649af4959ceb553e9011bf70187ee5cff130f1f3802eea347bcb0ca41dbb138f0272c4850ce6c47b38fcf1974ee4de036c9faa8e3bec804a29bcce366648a4c7a76f449a5bbc78a1b4e559b20ef75776f846f8777a6d753333e155ad7b9dce0294b68526383d00d76115d7b13f9891c4ef86c4807c1594aae4dd682ae747fb7c646d5fb4cc5c719e0a3887524bb5251d296d077f3154382969b316345cae7d8ca0b656a0d87b8b679fbabe4c6fe47c2f3556e8c2f06ec059f2412ce8ab31fee54f18cef0617726e1c0536644e6102a705ecfc8f51f4c54f80bea9efc747d9393c2fcafa826a30322a7eed0f55858ef19715b73fe9b7b81b856b03121282cbbbe7a0ca3b0d2708b8792af1a2bde871f78b36e7e50de09cbc2cc9c7e4f7d2d15fb6b827ecb321486c2e1541b667bdb11d2d8fbda0936150e1cd69b525bbf406634f76ea14807b244f32c3fb7bd19c7cffefa66d5414d91482a201515599d5a8ad14dd35ec8753153bc35a4a515bab3d17f4809f0b6c803e6e18e536c43a2a535e6b1a1565f3458b0e5feb23545196578605e7fe8140829e25e5c7785b0129afd83a7836072b890f32b45c533f16ef99edb735b08cb5515f80dcf56e8a3ccb0fea000f5c3116ee4507a7935452c9b82a35b8c39ce92c9c11759ffe0a6e2cac41a9c63c858d88032c9eebf059cdc8bc7d53330c3847ec28b661b6d7ac705dac48e109b3ff7dddbfc312de8fc9cb8185bcc0921d547e190a5a52c9d341e26a4e2fb3f9f14919e7c5ffc26d41582264eb6cb87c91140a41c1b34072f34619571f882e647d222ca73e914a335bb6f1fc3c375649fda7f162cac734e8720190dd5b78289abd741c792b41add0be17957bbe61441b28e7de44e5e619416554a24ee364507c1a88708d020c93d7e14462140abd14436c8d1b407fb9cfda72a8a5db66dbd790ebaed43642f4a4d986be07e2c598c21f2fb10769924c6ec32d21296018c592e29a234d4d1be5fec4ac061ce8617f8a3d15ac650421e9a41b2b510dd094045cf7adf3bb29520cf59888b211b4fcb8dceac32a00fe5087c871eabed0c00b6b8c455d898efd9e433d6042ef9324b73dae8cadb607e86033d1d4604e47f566656208f462251b5b300791920491fba7f11933db0d174890bfbf3fa44bfa118b42658a7d84c161c2087ee65dbd7c04ea3be13372175f3ee663e4a87ac6784302339b1d9d089a4c84887c22ff3f7036592759b764ed71753f5ec9e908d855a55d1f45667d7dd310038bc14a58a82c68ed7d70cc59432be21b88cfdd966e7e6ce242bfe778ae3a80f0ef9adb7d318cf60b642293593583248cbbe7e641f42e78db1ced150c9adcff9451599587f31aa1f2ff010aa6f5a20d0a96450dbdd6cc398b751369baf90471ddff8c0a5c3f830c8dcee83642b2c239a61abbc9392d1d06df2e75041ac0818fd7741a3d4521178f43ca83974621f35d12cbc650c9e5c8ce3425f876a29f90ba6a1a286e68c9e21d724cd65ac585573f2cce343025f1941b59d030f89024804ae964b9d18a646bcbe6ee745d9ccd3145123e596292a026394ca507c692945eb99093385bfac5de62bf407ad3b1b4f5bf14fe41b5382ca0e70dc1df9d99b3b2a0e289b03ad7b122aed8f7eeec47306b3f9d3338c05db3f5a6358ed6c87156080f056de3d1907a7108943a6216eb22af814ce20072ecfe7cf7ccedcd18d59423f2ee74f0c7f784230316a5ee801d3f2d7ee9716828e8dc4b97945ff858ed6b6108bf71fe5f6ec66a08ad2d6b6eb19e3a36467e54bbdedc7d78a97e920a14cb88a01b457c5768736ce532b0d45dae849895465a406fdcb762d1df9b5f470ebc3407a85376f7458a3407ee0f4fbbea440811cb9ef1f48e249354d21a58265badb19134d5b9238bb8ba5cfd18b7574777c86f5c168bb2381d311f77931bd2d25292af18505de3df2e4c4f67487121105639fdb5939b7521cef0df3ffbf8e6aebd340b281112acba115bbc0b10db244e786d98b29a5ac56e8e26023e9999680039ef836db29553a2996c84daa3e28d1d6c72a8d41d187cd127f0f52163ab7eda74e83a3510f3f172a92e951012e5cd3d1432abcc61bee9b35a5cc4b4ce5622b1268b3b2ca9ddb86d3042e193c5d28a83c2303a379068da158d367a079ece832eef3da5660579722d95f836972f67d6a902f2a2ea3e3fc67bdf0d5f7df8a8dfa141086468269df83291b4a92e6148e67afa045e5cf35be5001fddaab8d9cfd32395fe5608ca011a6b64a74561d4dbe2cec5f7bab76a17ef54285159e72cc4a0ae84a646435f3a8badf3d5a252dd293398169a870900070b2b5e207813f45275673537758bd3b23b61f75ac9efc9a113ebd4c0424c4004ebfde54be970a60736ee2ac54da4feacec6ad8539337
Blocks in bordered columns
View code
ca4ccfe862ddef067ba2727308f7822e2ff5a527faa6b71e573b629149b3b78a68741b672f3de20191875523c9a2cbc854908a1f356f2d1bdf5260e7b72901f9a113d9dc3a48318c60893f8ac3874f3d33b07c411b49aec29bc07e7de0a8d1b0b604cd777468846c7cb00be8128275503b672837f0ff1c663d91f774db248a753b42f0e2c02bb1c41e8279f28259b63d729cc7660748fea48b0b8c5781be1c7e1fa96b99e11789f9fa383206e4801d34bfa3b9cfb09b661a429565999f145567a0a1ca93e605f8e1fb2c32e5cd5f53e4dede09d138f9dfd2a794c6e7df6ca8efc452e87304e1a3e697ade5ca55d316131dd5f44e92d3818870ebae20924ce8ab62af4ee53ae9a90592f48b67c154e074942c8988765b26628ba454619f363391c32dbc04f867408f053f8991247c3b7c492942cc919256613d23d54b81fb97b132d5db5d1cad5bf8f646a9086bb305f45de6b651808639a04492f07b52d923eb0a30743e2734f01a1e6fee3779f3a4f66222bfd82c9118e5f41f1ce3645c70ec1857319efec00a8e98e337733227dfd3225d686fec355b3e20424949f7c658f2b1816af82fdf60234823049421ef5d4b910db1fa35160d4e5823c84019486ecd7740a3e36bdb3b9d8f03f2de30c50f6e4af288fa56794581acfa67a31d21e2c20c93f0d02b6e3981def7725e3bf2fea2e4ac3a5e125cde225c2fe60f0bad35a7c620788e6a6cab8427d55d02c9c665836e1bcd7b03c3c533626648283984aaeec47c951c698b083cb0b3cc6032da5ec8c2ef01934f52002157cec723154909e44e4d5603bce8ea59f1ebfe1684445976410aab8ba409973f5c40387ae7ff311a9da635a76247ef6b14615b5d53130db36893e67f17b87f3f4bc6b78a041278b41dda634ad848555c5796cd7bfee58ebc699e646c6b93a2e727f1ad4d9b054b8d6756edadb4ba162bb091aaca56bfc19ad29deb28b98a207ad41d119eb864535b9b349dbfcad702de2ea67801fc77516bcbd54d09094bba4c2b8939cd7d1e7f866ccbe4e7b0e9ccf94582f73911df3e8e0a409c3edeb03e352019b18cca0980887373f64844ed510edf215c3b87c37fbf65a67b8fb560ca5c326bbf66512870fb2f5da751ae4d3e2186286c3b58bf061cfcc2a4c2e73ce077d5e6aeebedede396dbec5bee4c4d365aabf46b963b80b1f724750ae5015ca163f064f66ada19fed11ee9e715a0985ec1f894ca7e5a4f86db5a295368dafe11d34798a819ace1d429f1b9c33fdeb82d140e85d812993e6ee0e9e7d43f109a264cd0f7724430c01e5c5852d9c30128c8041185cd021a124c5e4bafd5a8b1cb588bd9c920721fd0204702763c8e5043e9e1287dde1fb8789cb14652e1bc58ac5f7c8e7cc8fc8dad5dd93e027f857ee7447edf80deee0de3213d3dbf572712ae13f474472f0cf3a84c7700639390f9625c69aa7e2bb520e6253ca45719c53f73b959585e5d09d2e870b77877e8448e5d4091fe9e2087d4379d43f2d65b88e37f4526503529515266fee02ca7c50d7360d77268c73707f4c008f705e8e325c9229b8ef3deed408023f01ed3bbc55545cf8cfe45d9d1c0ddc90536a14b30021cc8fc6450874d388b8cf4629294039bc051de4b827c65fa9dbcca38d1e85709941aa252849f065a212ab7b7d8c1ca636bdcb80e3407678131445806deeadda043cebc89a21a757c98a6fddaed742b385a5af0b5543839e060def0874e2a02d926cd09c2ba46506d8243e312eff45363df74a75b2319191c910e93c36122af58396f060426fba53d89bb0e78b3a92639abc107c246ad76b089ea8b76a9f23234ff94b4488cefb7179c2df34437dd51c48fcc56b880b59cdbb8f2827b5ed341fbb82e8083a472c28ed61e812da40e471185fd7e0bca19954315260ec0764755e6b91834c672543dc1cb0a6984c051bc7aa8cc66400328ea492b0dddc0aac69689cb3bb88d0ffc5b33fc0beb65149d9a5571e4f1ff120f20a96720fa835f9639d1e7047c3d9bd9e6af85b41ebdb41e36d143dc50419ab5df7f6a500c2c95e8e66689e23aeea091cce6c2b6bf512dba694264e46366b3f2456239292fcb2fea948d50b6cb26e85b3d8f22379b1d4bf3dd4bdd0084bdb61209508aff2a1b826ee727ec837d939f5565f20f3b7293a00fce147f328f72ff1e06e0bf921478f518561bcda38ec0bfc2f10755790bcf702166b83f5f247117e3934a1bca5bed029efc0c011f5f1af0fa98559f56590ed1dd98c007e11e6399a09e63f34dd73d94ad94a3ff2fef46570347f486fc26ac0ff269adf85e8d428c9b2ccbcbdffa405ed189b42c8755eb9a7603b764847a96d48d80dc1f529e418de1bffc2bd4e1dc4a54ee6eb938852ca45708924e0d82974b20f1a546d08e9a77c77b5d1fc090adf0b8145050258b68fcfb099ab384872855284701b4ca19a9faae91d341fa9f3a076c2a836b46002a5850641d7605bd3f30057dfe8a451bf201de6b9289e0143a26fde197e1a0910cd4041c1b737477987e937e8e5d5278b52629e577ee64685f3985a6f9dcee27427f1c844ece19e0a5324a623a3ba91ba6612089c3d8d8c87685bd3e6271ce9f4641c58e55aa74eec96a807c33af0f98d7fb6e882fc9c4da432d3cc221adeb9b7a2b06c1dfc7462fc48f62fd85c28a177a0f77c03caeb7f8b5191cb60f1b10c19e8b295fc865de31eddaaf7342b5f0590d5481e32e94f15a9e1c44814e1cd4c1ec4509e8282100d9dd53322664da7cf36edbf9996cf97a93c432388bac3b249d8846eca78b7db049a91a50f56cd1d61d61eae9fc247a08cb5f2b8a5ea237e356d6494fb3825289d3f21ecdc52861a5570f9d69d8eca87eb2316f9638ef6310ecb3ce06224eb3df7a351e2349a8ff7a58bb0310afe4b83c60592fe31d62b571157a4e23d04e7f31a3c223e9d48ae2e72c8761a3490de10ebe7461b8a6b6440edc36f689134a4da13410dff25aa3d3b62aa5a839da4b2987a40d2fddd2e3981300816e60c3cbfe9652f19db60a10dd9a13be923bb256b096d69ccb33178f345915e488518bb0e3ea3cd1556865f25dd7c08fc2d1f9eb41ffc9187d02039beb5cbbeac39c1863d0625d198cd782c53d0c528f1da264c9fbb5abe180832e905fc0fac03f75c38a0c0bccd6eb469d20d361aaf0962510320e66f57eeb73e42225e729c2bfd2ee915174132939a28fbace060f8dcad96becb5abcdf3484de1d40fb9c0c3b96971e5e8977bbb840493ff4870818a6270922083f18f25f38d9fb5bcbf000ecb0ed95c261426182d76aa8c604fabb7336e5d78e1cd9dff406c2272c276d87916b1aff58a2680d7358890b5947f70df1439e3043bfcb4515d9d093d00be327869a10f7938d1e08b7a072d59e9cfe4d4e47379b27375811297368bdf1bd0e2eca8e6b2eb06ed89666afa891423dddd2c14b95776a2b6e42da86603316dc6947e9c030c2328c8846c1d19b69f5a3f5098c36ea9bcf12a9c44d4ca27340076d6dff0563e56c9f2140d002fcda25d6a65b2554b699792a55aa59354e1ca0c3cc4ef78b17df9819492fada06f10b70e0f8d271410a8f8c0273607b5622c12fa3288e88b62e1388fdfdd7c52d14438c6c61de5124f44c914f263f5384734bace36dc6cd0f2ddd8baf0af2d97ef886f7792376cc3fbef03f9e223aacf438d8c43572236c66e6512d3fc569677e7dfe9dcaeb07adb6eeb5594466695bc9fb6702930f88576f172541714060936fdff691c7965e2c2d5b106c1a8c07801faa661554994226c14494b3468e8ead3acf1ed2dc89883383a14115562e662767752103e93d5f5ad03df04c59650804c43221817934504f609028eadb8bde4b515b50f5f0875e0eddfc4ae11c0e3b21e00626dfa643f20bd917890a435c4afef5182ece21fe03bdd6c80ac06c47744107d42f71d98c43929fa6b1b56794a39cada82c0671f5d86cea1f7d7d2e5c6aee3b034d7c4c030102602e2173ebf35584466124307722ddc7e6bdeb854fe15e9dfbf840c1c9a6a24c8a3da69db6122993cedd8c5f62ca7114f331c280219558b763ae300e61580c5238aa0613531e6631df7e0eda6079fbcb07d019f278e59d753177b4995d8cee56ab981e880c52a96da0e3577ce72b326cffdf2742f6cfee2945370186c343e3f0810dd6b49b043a864b850e11ffbc61c835f22851ebe54eb2d542ec2ba3e8c7f575936efec96d6d880accf37038bd34e6b9eab1993cc2b33c65ddef6c025e95f7184f33e520acff87f177897bc9105e5bd2a94e368686816ceb79c76373d1c7ff82640eaad942512dd2c759e76fc145854319718ab90165e26bb501f61c28aa14ee4fe7a8326e30d5b963bf018fe9f1272f60b72d3e455f1e8f5fcb5a837bf2ecc4105c14fcb35c7e041bef5dcda1479d4528e5c0a876f025df449ca1aa9a42cb962091b9e3310f45bc1366e34653938afb368f6500e6e89ea82f89c84c4a522b1e086eacceffac2676b3ba1d6ec291b504d3c43371868b740f5c38674432aa87e274f464796730166d1cadd37037c155c45a762a9f5034c6fe3de53b196e8195ea42d70cf7669136b018d08da7dc64c61cb195f7ae092ed6185faca2513fafe196782617d4a0cfe5d31e94c4391c233043ddb250b7f1ed0009d157af53445085447f1edbf8c098c86e3a5b6c3a965cd8f9e4f308564f63132bd46219e3c5b68ada48ccbac093a8cc52aab4eee68d89f6318a0067877e8b479387748cb816dc58b47f99989c71cb18ba6af668a78d989d5f61ea559790cdbb719452b786ea9158a8c10acc590a6622d206e5bf13af9e03197afff4f4a583a58a65812698d468efc2115bbb72cb4d09c34be9bb07815688cff3bb54161a0c5483374f941c6316e26687d47164e618c93fbe20237e99350eceda75368cba28372900c462445e4de486a6edd39f411200b28458aaae323df824b06759f927aff59e40946ac6cb11320ce5aa4cc55871a8707862dd71ba04c1a17d9c900806db7e935cceb712ef61121ff9040ce6f9e31d3c8fd9ae5c35751b903539981fab8679421c4a0103a37cd6b845bc636cccc342a9be613d8c8c7e42636cf782bd630291875fefd2ef74ac9fd095b1a0b5a1db655a294c2fe05cba803ec19dbffb4e39a535dd0f9805e51b744d45817ce220f2f137a8bfba8abfda30429b2aa824f91d81636b944c8e97e0fc2579f167cbf01f273ca8da3ead697b5090cdf8ee0501d0fb5229c71cf456fd55cea135b212c01fe62201519b2c9d5f9d96ba5d4b6a13d76dd07099d20c1547a7829dd6906b841e7e271ca2592a187dd1bd392a6a6fb960c1d144b7dbe833eb51f4e1c2f13bc0d82497bfc12ca7e4ce2f8efbbd3104da754e2bafa0592fb9ef7bf40784fe1785b264b6cd1b2f6ac9581fe9571d2f30fc95433605bb03fe1b51031203106b1eeb2847f085bbcc0fd93e63ce2a7647808d6ec4c965b050506fb7e859bbe039be3fd5ca3484691bac6f671674fd3f862fb1d82cafcdf34f391065b1ae7cb0b86c61ec9420ed246def7f408972a7e46cfe5e69e2bf663124196396e433e33281f12a4db1c15972b7d4611142af4c7e2ac3554523fa987061c4d2b1bb5d9111f1f70cb33ab3019c3b75a6cff7d1450a2e6072b42e35250fb938eda217dc679eee9bf8611774c67c2e61ff40d2e442a79e1f5cd8

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