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
88362d714ebb232d168b06fa197452d97b77c530447d55310eb0978ad580837553e72f6fe249233c15b7ea0123d8d339a2ad9ecdea3c460ff7db52fe5d4f976ec870b939bc0f1a0859ddadc895d66941cb9cdb0cd4bd9c0983eb873e6974f7ddd5239a2b947987e7ed7ed3d72a96ca9c854de8cf923c584006d63e84b8332671dace78425c6027180d59d2c47646bf5bdcc281e6e36bbae606e8654b59f427d6c859a43749fbbe7521bbc47a564fd7c91c5854cf4f5bcb10d60695f60fa6738b8545eaec272cbd74501b3e6cec2a904bf2cfd2c17cb31a57df9091c9431b18b169a7b58eb4f6b7c700ba7e1d41d3821479fec783c719a3af538b074823e051fe857c697634c4d4937b97a48e2fde3d8c5172cb2de1cd2f560cd13cff6cabda65d44010050cc40b6a8fc59d1b1cd73f4aee46753f63fcdc015209cdc8912f49a0786548ad406a0799412367133e88d0f3a507bbae66c91c5fc4c6e0852dcd92c5ae6c52fdbf24902c7b3318b8a11d8c825fe221263492a186795063e43e90fb41f5055c9a26df9a58e8edb821e3a05bcb0b1745ff2677faaff16de1417ee85a578d01c2e12d47533eff241187ad5b2877aa457db985b83bccea9c7f7231586e61668c48d9e3ef53126909bbee8095192a6b9bfb87d960cc63e2ced887748194b05da46f33b9a82cde05e5382c92860d00c7ec6babf8b5d3e93e6ab1d0c665282191e7c414a611563b39a1ebfe7d90dc774a3453ed2d2f3f47e8c97dfb04a1d6b6c0e3da031711b575748d8024fb49b0d240c14f4d1c664adacf4a9eb18171cc0c854058c95100a427a0eda41aefda1a04b98f4b5c2e4dd99c0e093601abdb476240b2309c4c8b2b159fe3054c4aca28984b10a420fd87eba3ade0468f07d52a93f451110fb3be1833522db83ada9f67d5870ad3de5ec806fbd2c9bcc650f6420f477864d17d647f3a80817bf9695f5859367a8677fe6d50bb87b1b4a8481c5ca80a3b2a39a9dbada7b364101a956a1d412843cd8b7c19f1e88946298c5a6a356b6501c20caf7b356a3d0647c1ffbe96f6b7d20f05b9a1f4378c739a0fe4ed4ca5999c04d8c686f3c6266191c0445d8147d5bceb13f17b4953dfec5ed380aeaca5f99c735e0ecd0ed6d561227258afb10c230170a3e07f5158d979eaa7bcae39a1865a65e16424aded3a76f773aa125e450fd8261bf65a5d953ccd8d428c688db8675d5a9c1c83366119998090bede93725397817cce0145dccaa1dc7f15229e8efea4cbc11ef4edc3660ff68f6b8f11f2b6158d80b3ec46f296f353ce875897efb2ce3a8c040091b1fa346531631f6a28b7ba23fad662ee939f678519fa04b47156b7483eba9e5e58a31761d0cb11c12bda4388df385264ea518e129abc5b8f1b2c378e30455fa1a4a17612a05978a41fe48c78377f7760b3d49bf685628c3abd5afcf7440737d9caa46622bc489ccb1cbcf2729754d9531d6577b89e140e4fd8708585f1bf49eb275a6be2cf303c0e10a1352eccde6974cdccdf72588d3790580de1217cb49d9589d1132e68bfa29a6fe9921d6d0b70e2f11316ed74f267aef4789b87fc5e7ccf8103ff2538e7b08ffe6d3c593a7c0ca5ef5ab6fed6c0889e032e7cb2341316dbdc72c77a17b0c58b91f98f15a96076b70b826d012ee8418dc2957d316c9f3060b75c7def0e779bbc97f509cffc9376273d2d2fe0642a0dc31f56c77a30fdc55d98e3e92daf036a8b63f301d14c0542f1de2cd70850ab9e0d6726a8fa3f08332fba01ffae882a6e11434ee006b3886706ee7e0337687b32751c054e484bf48beaa15cfc7f79e83bc41af948c84404c01e078958f74f9b020dc8ad791473e665d214d47c7c87c2bbce8b15b61ad5962f43ce4a02f3e424f44e7ec6d5a72b7c919ea4b9ec3782d00663415012b46a5b18d63daf7ef8bc6ea93ac5edc13f7e2077af7aed42e6ebcfd4ce670206984b8f9f76a682b465894f642428babff66dfe8fbc738eebef862f15e49b635e68062ff16ab7095af3fdbf366961077e1030291cd6aa9c5e9710a329e4164aef395dacca3d0d047441b74c22f56cb64146a1470f2c0a5d282214aca15e55e0f430982605192624a92fa52c7ab7d1c91001bb321b8d6e1a1337a1ecd5de460ce4ea8c5d15c71a11389e9cc9a0a67f8eff0073f8b2a64c2665635eb44dd4fa870f2d6f132d885cfaf28128664e77a0187e850062c073175594922dc2366997ce0486f320cc5598e5ea9bf1f28d2dc78b902ba7c045c472c39cfc851be553c9d8be7a8568c651ab3dd23213e77cbcd0a4b905ceaba1661d3817ed494bba0db130785faf7131b3f0905511ff5eac3d9c193cd7b60cd8bc5ecc962c60c07673b59037dffd08d4ce65ee0a83aaeff5980521b49189ca2a3f807f0b7814c86aa07416929419bac1025d5040fd237b8e0a7dce9a0a0c668ddb01186a676a87ec63887f26f971b704b6a87fdb3edee31e39fa8b6d424e7db742784cb055d87de975104d34b70d67b01eef8f27180d4991285dc201e3f2a36e916439ef5e59c852da5401210e0f9550cb042e7b464a03a7b91d656417955da7ff85491e1ed96d77feb4cb61172c150f4561d7baf053626cb3deef1cd76755f7865010e2678f3c49db22f0a84034d9f67787ae082b81672b7d603a0e32497654fda911ed2c7237a1fe4ea92d68d7319b65d3ad096f7894dc5865773e87f674e1fb4e8b40e2132fe499b2b3c1726a1a44e84765f0dd10855a30682dbdc9fccc9647e774ce6f4e7e64f324d7b57f85b40090a7b8bc8f1f6b2e151e3718e8c2bd18fac3da7fa88d5783919ae3076c0ac8c302b3fc429730e8cc7b4db982849bedd109ca31aacb405d8baea65ec07d680ec42a999cf5e71eabeb9420066551f820d37e528acd7f7c227f26e4a61adec5c38a63c8159ae95cf1d3418b8265b8b20233a5a2186111eb2515536df923986df860043d83d336a2c3c6a85c082a52d23e3e32a22ffd5efbc3dfc5ff535e87b81ffe55ef70d441bb93a090e53f19d6c5756687a49f0c4f5d4f9453457fae173a7c2779ca82456a229d20c7490bf3c3ae6ca5494b44d6fddabe2c1a1e069f56914dabb2e77a6209437c3fa3edfff1c7d2ceb360b3bcb731c75675310f49108cf34cd1f57417438d04d92c0c20617d5028c14956143beb9d9b2297e78abf8bef828d5506cc27f7b270c1caffca12cc5d91db73fbfc2c19dcffb265d54862a3015e4340ec1d6261f51d775ee61a25f2fe83757cc933bc58e177e09c5fb09342ddee47babe6da8cc902942e0aac4815fb50b979657cb578a434a585b29bf36b791a1b950f38511cdce964b1ac2ddadaa3dc8801e113df91116caa0c635faf41ba6e52b014176be2dbd86a4c3a785d41a0ea82cf46e3963cf5f5d9e92bdcce1057801c8dddf06b6072730ae8df817ee7d32bbc04a08287827bb6095ee06d018400e892ff5871513f000b37eb65711ed6e70e9786a974be28de7a823ce3f9bb3a6c13c5abcf773725b83c9f395e513a1433ebf54d4c8dd104e228fdf2cc0c54aafb2320450855af071ed15089b009b54c14a98da5a8b912b197baaed03a6b7fb68d684503ca22a47b19c429cdaecdb63eacc6de781cd8eb0a49e075433713350f22d799ee01bd5d9b311d71830dc19dca06c57df6f8820bb6992e59492c7b2c2e9e1b06ad4baf85fd75d37d84a62c31f68c43f3f9dc4944418217ef59b103f4a0023669f0e9220b7c2e2b37e69df18083b7a5ce4f2dbe4552302e665f7518cd7fa26c2e6821fce4f1998e8bb65a4a54e01b3655c197c77bf4b4141342b1d689c4e8730bae891bfdcb764a303ed93457a94a6fb747934a8fa1669f8f7221ef316f956a2e299a529f1ffbe3ff9b43c01b4dda2f457c7f7c9fb3fe26d2d43d13ff9896b45c535e01b5651ae706492ecedb3711cbdb94f9b62d119ce799579224be5990904f5335db614cb890d9cf26eefa2e6b7aa30af935a84aaaff9031d6bba2d01fcb89977261fceaf105a1c2acea8384ad648d124b10a9508d155bc930abf36efc3a6806eaf7e23956f62ffdd2bae755b026bcb4166a9f40e3d5457e310e4b272e0c3c1ab82f82900f3b7a44657f1faa8e178669d7b01558f43c267f08df66c2b0cd4c0afe9108b933d20a3d347c6ccf01966a46a288c69bf7f9fd79382c2ca4c39ca63875b22bceca6f1331e2600299e272a09fefe77f4bd3cfb299822c9fbe0395c4afd4029d77bd38d291ec941d32ab7bce964cdb4027ac3e25169110635d4bff6f42c7321e61d5c62add2dea17fcd09724de8c16a79fafc6376e1d968e4b54e5beb24d5e0cb2f3710210f87ffd8b776658622dfa528915bc140566d29a0702fe162e77f3125d7c0003fc752ca7cba4479c571441e4ccc65b94bda3a664b83f64c6689f9e4199df363cc7410c63190ffd11f7357482ba78dab0f71d17db29b2fe61af4dacc3966170f00d094af2b5c219788d672146d9c999ad1abf212b16fa6022b0bf6c5e3a018b9e049ad63b6f02d907586ba568604f4f8165372bb92256c87935bbb4c86401b236d404867442a8952eac6adb0cd4d3469bcaf49e3a6397017af880728ab0603b50dd9d86915c4689a4d1cbec4ce0bbf1c9989a2be90971fa63b673d4d79a1eb9695bb3a81d9e01c177c38fe6ace1d419d2985e6dda59fb25a0cc4669e81dd3b51899d1eba6ffb34ea277e2943d76fb2a21185d4d87d5126c39f922e183c43086e7d20f43f3930c7f4065d37cec28a6c90e4349a2e359627b41dbdb7516f87ba8bda04925f7d86cf282ba373eba7a7b843bda52e0cbbbe118deb2828b3248cb6b687f25af72b6f302087f7d6a2bece66a06350cd3754b101c1736f0277e4e44dd995178c4d136f73d9b1a94b28096950e6e3b5bea1c2d261e8b2a7671f05ee8e3918cb3a5dd8ec80dd450204389c133e28b552fbebcf1d49766e140bd534be65561c7330fbd6471ff00ef7f4ae1ee0cce9df633f9fde944a9e6e8d5beaeadac96c1e480705d6596425df719f1873f62fe55d82629ad55180daa5c0fb036912d68ea025771545d808506f5a1291c5ce600e0f6fb450414e329f75268c002733fd0fe8f07dfcedaa6606217ec0b583ec940afedd6ce6aa335d6bc97d1b93292b7424f82cce04a9d59be442c0da4ace798a3473dcd2b7e1dcce40a1118ecaedf195fc5030df72755eb1389cd2dbd9ae3727d3e4f1f2de8947cc5d06b3cdfa8d76097de18647efcec80d7a42f87e22eb3b0afdd3dbee89f1353ef45addc14f26e98206110aa46be856dffee430564626aeeaf8012f61b177bb35672edd6a8a8d7e6b7f8d3da0afb29b78b1e6d29c9f30d7d68391d1b84f1338f37d9cfa7452d23aa7a78a93a6872462a221519761a7bce4d3b68565de27c329f450ccc959e97d726b0c30637f0efc07a0a4788211652f0dced67e85d88337f19177cd0880e72460ae453a533058611c5b18af000d02f3fdddd3ea63d0ce674833daa3285ed6223b9a891aafe3091f897e9577fbe9b57bdccfb98ffccbe67c2d515b2bd2cc8a9fd233b58e3be3f356feb3b30692a6a166c53a634eb97babcd3f76f8ca4c93c5ec66640569020d6b5184dd50c176818d3281378e264da5b13f9c32f006209e9069cf8b18b25b9c8b7aea19d792d1855c1d6509293d462c393355e3cb2ad2fd3a1fecff3f86acf9147cfbb49559e678ab589c21f19f6d1d462ab1dc7f4a3380f560a4969d6ce70795721f5b90aecfd91e094035f214f31274f6efa39816c6b87cd8058f68151c468ded25e9de4cfa93a141ab1dab667cc9c407fb2218ae9f89db5e3becb92edcf7b9
Centered contact blocks
View code
3495ddcfcf39bb34f74a34ed7e87a16f752bf4dc28e9af741635fb6cb561ae7ba0f3e47887aababf556dc71bf098546b496b5bbe3f9cf7ed9124f552cae29f189c90b62c1054181a1472638a8e68abff44c48fd3eb4a89f8cb35732c06b6e261edad8f52df734e330d27aa01e6b2ddb889ea62bd3c606cc7c2ee56ddac6269eece9d5ffb8b48d81d35c7aa71ef44f4ec673a0360e447aed1d1a4f2bee7ec94c6d5658f83c8bb618ae8f0e5147aeff99608c91ef24c9061edbfe9b84e2b648872ad35151278de9135f1693e1bf7fc701636e22fa1868265fa3ea67ce658cefe2745b1448c7e8ca77a61a2560e807a74749c73c4a3dc4c7a444ee4901611446f0aaabff491d665cf398893dbf4c85831c4f44040c21abaa8b894859dde98e155879d02efb105704faf7e11b7c6985e20c9b6a1613d42510e9bd3b011b263424cae7e84e5ec7ef58ef238021aa153424270a98d304c0f808624c3acf90f13e369a26d117a3e5a13238381f4e4982d27a73cea67f4967739056b8572a50e7a06bced83309f8f4c69f7afcee6a6964f0985ff3b8858f4db54aaf3d34393e90346fe1d84375d847416b92bcb5cfbd4c919fc4844c8d98b02835f16cdae21682daedc8c533a0efc5d8fc443342e0c76e97048d557626c86869fe68342041be98a25e8c0e55f85f1d7501ac2af1045b9b12a531076eb97ae355ae3c80b9e43a512faa666402320e332d97d06ccffd807f1238499562c4f007c75cfa7ad8b53a223ea6bcfd7f77f46601d6dc52fc909680779359a122f65b1eda731407de3efe28fb7a4d57ec1a33e6987eae46d35a4496126ba5c9326e42b0ab3efee9369e264b9e9f564b62a736cfd3e9e396ed88fe07c8ea107265be6b7b0600c09b61aca964bc00b325eefb4804aa6f9198be42a2f74dc60bcd12c93e706bcb8090778d51260963fcebedb39e59bafb19140c2db05fc79de92b14f292d9eb2759654b4256bad6c791e57432477aeac77e4fbc41dd02e779d32a74152e3e69e3e5d602f6b993388b318ca4ddad6c87c4a5b09cfe5c94aedcdc9ed46c68aa34c626d6013e85405621525db4f26cf6f20d6157af206c327c23efaf1926376e61221b809bb9cac34a4fcd92a18c4c1dea956d321a5cfd22c6ee49188b706b36d8f49948016f8e346f02f822c1c4b42bd613f2da79f1733b0cac0ddfb92f3dd9f788ddb474e04b9e6ef420d88b6a9f728dc3b5403f50f0def7d4e5837c81145d6c7afd609eb7a33cfb0ea834336fdc371b9fe6bea2333c019c20857ba560f82a61726122578a40203b86eee22d8861b7cac0bad2f6eff5ec53f81eafa3850af050b7cf5262bb632dee7364be695c0e57b5d53c47937d07e55c6450fd2fe3127cf5ab7e60f7a5efe6e25906bf196d9305a3498af06342a7b744c9b07b2863f378f5155bd7a58872859494eb80f67b9b05f834653bb579c1176b44f3b6b8bd75149cfa8e73c7383a3f0ce3e609a08a33a21c250fe475d859323f92efc4df87fc1a10b6d290c6b7f7239907f2e46878a5b7fdb80e6dffd42e332626c854639a32a4d05e27c4b07fd29ee8fc183fb9bb2a8a1c5deae7a521e30775554c77a338e94d2f8f70cebb44f6024254c430f33dc38422ae5143c46836a702740f41328ad87603a8dba2b26f2bd1456a364fe8da5f48eaffb6d572c7bc3fff68bdd0db9586be930538986f95d79caa74b7805ec5a22f163d2ad7696024b0260f9ebc67ff28a8eda23725b227cb74a278780dde624da849ceea7b652d7d585ac61e47d718a73de8774e2bec845a50d100aa418bd70a493589a501fb6b17a048056d0172e9ba99cef8efb98e8b6c0e41a23912bfe4f54164490213655eb2864415275eb7d93639283174e6c98f821dc0fa4be15888ccc3bfd656b73d55a496e8a80e72a813f6108725b33aeb3d201ae25de3b5ba5dedb4e0935760f75c35cb71af5f2d57587ea9ee6072b9556812e5fe2e92c052a0c1ed9f818f967c0b1d52931aaeb72b7515531ca95db89d1476b07a69248c8f30a6eeebf46993e99650c0950f7b2e64977d6a40108be8e45a1bb819fc766f1f95bdf936183d5433e9341439dc195732f8dc858490c6c90ab9f2d7d8b906815b287830f202490a857aa4c46793194dd3a99b6043232330886a2afdbf9cf82e14ba1a2977d2a95fe0af050a3946d08911515e0eeacd455890081f2f962463d1a8b9298eecbe3a1e731aedbdbd36809c7d784c58822561eaece943271955994da4e626ac11e9608bd6a3241d36d5bd781327d092767ddd51cf61dddf1fcb8170e4b7c0442484e1d517fd44e09b283faa83c583c79bfaa9228279a38b54035c92ed3320e461984ca8a4bce869d7c452aaa97b859819b7ef6a9afc83bc444c034524174dc7366a4e434ac42df32a47de35f9b3d2eacdcb92d0c9319e3c2234e4b57dc3e5db7619acfe7d2efcc93f3ee912c44a37dcb36fe1326b6067bb9630ca99e37c7af66f821ad3aa4356b408f892ee3bd616b282f13123130223f318d1ed7ae14d6565ba6b681051e780547433f26d36648a915aebc993b17dcc2cf20680e4915818898803c4658f3891418d9216b701aaeb96de0e93dc2fd3cfb496aba551a528ffd9b6a2fe510a18561a58a27ecf822be0d6c9ba0829bf8ee7b628df9798ea389a9e9639b2a82cb1284fb90afb4434cdb32baecb13094a99f8db3d9bd0fcaf0e00a997872d9a3386be010126950d4f6f3e522830b476739a30699f2c20f91efb5e9f08acb303c0cddd2d454dcdd1d499d77f5a9cbb5cb79e957b19a2e594812a449355470c3617cd793fa4bff98ad36ef8808c85df625c7792567280d1aec171e90af8ec9c8650622606967a24630e1e5502cf7d0f7d2649cfa37ce21c74863c9295e66a4344a89523e905de85bf86c4a905d522d2164a17ec17d92cf89d3497683546c0adfec4eb0203ba0b6542f1b3ae98994d725868d711ea2040eb1e68f244c4686aa672d41d0bfb15333e51a7191e86816d6466ef386bf36dd71e0550f047475865d5f3374c2ac4cdac360a3147d30b78077571b4d061a670e65773d49333441d29e4756f05a486f85782cfb39b5bf1c20d730cd9d8af2af7a067f776c8c518a0db88ac59695e4ae0847ffe81598562f4eed367c02595e253aad8938ef7fbb2c3833158bba6b4c13b40b69a149c6015258b6f3e87f707ca34ee8bb901d77506d416d601c10e6508f6bf3b2ab0b82dcb283ab9ed7aa49f67ab12ef1ceaa00758324b1cc204f9dec74a2b1dd31cfb1be17093530c9ee83b962a6bca5dc914771dbe6c99ad84b098bafea39802700f16e0734b03cb5e2e2317504110604e13b9dcf9abe0aa86ea06dd2d87577671afee5a8e90b8b3c2b498e9c6fcd46fa4d41e05b3a1b752e322edc4793bc682de032f6d08879fade5dc9973d6a8064fab4484f25eff90ec70dffc224d263d08afc72def2cc06c62549507901d7de71000437394d6c16fda78694b30452df615801fd16978d94811cedf211921990ee43a49603facc54ccc517e725be4a96456c31b87fbb7970ea86028d5fc706a910e89c6010c29382aa84ea00808dc7abee50fb06af354c6da378d941f821f606beffd9bf2a8de12b8c8fd8d3387115b1569351f57c5887eabde83e3a24608d055f7ec96499fb0daeef99ca11098f92c19d2ca38256cf31f67aab0829fa0c9415747220368c12eddf558af3c4edc0b307b9dd91f9ee4df09635c2dd35f3b56200cee6f41362df8692d0076adba510437bc936f9a4f87dc073d76ce74b1b42565fa7fad63bf3d5a9590f8f7ba02b38fdc41e17fee4d564bc10d83f7536042f0b5eb2b343458a34b49b4334cd6dee5983723b241b34eaf7f1d470a5658838848fd358823a7cb62bb6becc522979cdda918be66d4d2165f4d769b2e3d26baa3b08852ca6e83853e7f1701aa134dd77604e3c5e71c21fd3562d0a0581e37344ce9fc905bc4b876da51ea92cdebfeb8f715cb64d4b24a06385304e9997da7a344f44d90fcb27b180759f70ca622e07a188c7add6e16ffe8f76c5ebd02993af13b0e1b8225c0ebd16192d5850d1078ab69b8bb8276e1ef0300c50b3284b3163375496b72e2c9a97a4ceb612ceee9b8a02270ad901c3831ab1d6453d06fa7b44a37abd15e8a75545b566962975d1c69dab9a5d5b9cf7a1bc01b019d36569a5a59f025b79e6ad04d87fb354643a416187177ea607692957f3dbe3c873dbf9778f568859b3ac38b0979c589559ae7daa0bba6378cf0e6d82118fdac44cb484b4fd4134f3b12c1975e07d535610dea2340602a0ba435eb5991854309c30fcafdd26d6190ad6c4f3de1d339d2b523233e7abaaef83b6024144d57703699943d991c7ed6429d236411cc84374f8ad9c97070253b6dfe91b035d4ca6ffc9f3962e8abdb8415de2422af7c62c1f8e80d24f708861ea4f5bb296e95cf02290a1c903fe3c54d8abe5f751fd7b12257a5ffca1a195b2eec76c40312e821490c0eb89a8233649681c3e19773bed5c6ac57e771ad9ec02158907233d948b8a06e1a0ee77a5a6f63b1ca422c4807852c6a26d659cb82c65186ce21a3a6eac830136f34c9d74918c90e311ca7ae2c7adbca69af1b11298c3d399bd2a9b9f5dd2be309b3134e6d4b41859d9b13be7df4adf2bc34e59fd95999e0bbfdcf03787fea7a9d638e971ea8691cac833b621120e2b66deb6ce30da706031329a15d0f2740c4ae74a596735654c0e25d892a0f302fad5f07e5c019e092e3eadadbdea53814e48423ecccd23a421cf1d65d3b4a62c3a3ac2baaf2c2323702e1dc37a081b0880e2e5c21b24ace13a0690c757a4c93b3fad3e48fc4d089780616c7a7a1bca5ecef5812f8fde9f72fe305dd4505bdf345b1dd05beccc69692afc56989c7375c6534d61712fa906bfdcc247d5b19f1dc704e4c896401ac062f0c5d8d23982ac95edeb736feaca0ff32d102dcdb1e9097f8ae306df33697f183cdba7a4ecdaa44bdcf1c34c12e21091d9ac6bda52ff90036794f2cfa74c289d4768ea0db1b6806a8a2bb521d565d61c1eaea56e8a4a6f4d510e6935e6356a9e2b43a73d55ef890e0f1b0d5a93b6661d6a933c7afd1dc0e7ce44642b9a468e8413b608ce18f2f21d1b798fb7eeeabaeb940c9e7fb6953271846d272b1ae1c041295f7da5a90a2fe8895c193487ae4799deafde98a7feba072863fadefb121ff566bf43860fedf284fa0b9732597fcbbe8539427b7d91acf99b803a986bdf285bc47e7b1151b5a2ddcc46600f8fb03d4af62ac8ca388c5a2536a0a8c46a98f5b210576221f35bb90c0ff786c77fe5191aedbe6a82c0c953346f91ec54a23c6ccd045169d6e67e20fb31fbc26eae91021f849c93d1640bcd2f80327dfe728f946129eed6f53758a8bd86fd26c39d46a1e41a484eb8ec7ab34dacc6bf5f0f5e5f120d0cd1d44b8198f9ec2e7c2354755b7762d3e33d3d1f9abeb263f52f366c9d7f8904b5f756aeb558237531cda8ec4d0c81faf6c7ececc738182fdbf634acb40ea2d93e8e40cbf02ff3f573e0f06d4defb133f36f38c5e94a47738b61253b5587a142402551758db327ada9c417fd5982dc4cca024c2dc819d031df1e077f26b0f68ed7591c0b1f3586d3b0e195de75ba7e6a180f994b1609ed07929b660502e0cdc8821b7d92fb8eb7cbb0738cf8f659ce9013ef788447e140d11e097077c0baed380c3521bee25860fd28e4a47c09896dcc9915e1e1d700deb9383c85999018db16ad999c76f0674d23b02927eb38aa0e521ef3c075a9edc8587128855da8e0e12ce059ecb032466f64a8ddfbc3992e86f8ffd2
Blocks in bordered columns
View code
46cde5826317efd21339ea46cecbb75e8cbdd2948e6f9c6fa78a30814dea07739c8b6eb45863ba8d82d820ca762e56084ac8a6a413427944a1136b82821beb9f11ac0cdaa392649c9aaa4c0d1b1c3416771204a2c7c3cf7b59bbcb797ad64549b86e4dc063e12036fc6ee70c5c11891ebb5ca3c5b94ef15ccb279ac712799e69cb9ad182b54bf3035296cb6c38296b0ccd29172933bac61ced7613e8f80a1f256b653e98827ab7f062c1c5dd6f05299a4cf43b7b17ef5dbe513492c4c2dc1114f106acec13a08ba133c7067a6c4dd881573437fa25eeb7e513c94df0ae29274f23eafb19693c4cb76998f10c5807481f8a6300a31a144e50901782e7012a006a719b9287546e7a46a0212faf0a8f2663260edfdf5672843c4b67b1cd1df53749cffbbda7ebef2a4f22367d9cba46f71cdbdba566a8531556eb40232b151a6822ce13d44520605d2655868c89dde3368aa9778fe16b1079c4729d9fca438e5daf6ad27a4d7995af1c7e6525ae229ade6984bec868ad7de76f487930ec0a3ce1b6101370283bcacefe91ece678ef1685b01b7ce81cd20032287d1ee38f5fb420fe7b3ad000d4d2e1782a7c5ada5e264f3a4d24d4603d66c814360137a20aaaafe32fcf2fda9264bdef541cb33c4aa35e229a4f08c9c1e683c0d56ee04ac1a2109913a45e447b79fb1aeb416de2d1a8fedb8f83fdc95bea942c82622bc64d2b93bbb5eefb57cb6c91b8f221e972055759d17a840e715d72242f01c88916d69ff120c9aef8dff5d9e72fc1f34a4507956b79cd41016789e09d04726fe3d8378e756631dd9724bd5c623e28a30a59c21dfa740f76420cbcaaefcfab61e7ab7e8f11477ab8e903614440cbea7bdb67491e645a42d421e49003a226c0d4328fecb1f6516ce6d5862e80faeab5360996e07b481603d0cb0c3d03b66f0cfa991135807b75aa5210cdb23c0b42e11e4798cda5fb86f7dbc5b00de3053fe6081bce8d0727b520618fea2e2e94c0cdb6fe54472417a3dfd90a30a65f7b956295454abfe946ec268532dca9d4f0bdffdebadee5859fad19c53d42593a45b504a142d204c20a7cbb6dc8735144176b80db712b2dc51ea20cb12cd23d0a120220bab50ace697ef15f83f131433b53019d5a5e8fbf56ae5ed275e88d2694a4005fc160490f984f45b8d5fb598ecf2a070c23669c22a9a6006b8eb6e76ed5e6e6f83fb6a9cefbfb123c8f9bd92cd62188789cbffa2949e7399ae0390b12fa3d8a11baeb46557de0bb10903156ab6de9d43789370fbfbc2a2199f385e51af26465e0d3b87e8b316c90659372a4142fc6d907f17e851ff895258aaf66b51b821be7ea8b5987f9f13e0464167c72148934019073ec1cc9d8899ef95bb58f14a6ad27c88448c157b24943300a5e06bafd37a32671b70d99e7fe83b375e519628f1a1034954590b810ce9a1dd023d35c23f811a34b84fed80857e00495ef4303a40bb68359c3bd758533b274097f87d9f625ee1ee4da4c71513fe36ea7ff9b56147f9c77abbf658982bfc62f081df9e0b4db8d546704521a8629002c018edaf8ac7de1a95cf6ac858e5aaf05f34b2938ee2936005890ebfd66c43d3a9ef2cde7514be3688ebb221b24a63c7fc0d5eea62b15b02cbee3a8d1b635d02fd0e4caa8d58eb3be951479c714162c95d83358dd860b0028df6d91c0b95435592490fd06aa33d61dcba665e9dcc18d8550426fae4f12432fbdb80b64557bc181c37504cc8482c4634bd1d6d0b28d9626a3276448a813a95eeaf75506db5f1ff9676864966d6ee4299e0b48736aa77c02814163e438fd0974896707154dab2e49b08aab2404445998893a05f65c80cd26b8336a217f17f4d75395401d673b7c6a6f24510bbc4fe54b9d9a74de0e4c38fce2527cff2bc5c2f740d974cda7c58c60de960d8de2a1401eddc63ac56bc79cbc15d5205d98683f5c0a3aea5cad15c07329ac11e109584d0d1186439def602fe2de9da48f1091e86a7bcebd0fa19940c38b074df58ab4e226e02d73d9f1fb46ee56e152927f4d3dcf3d80bcaf06940157b2db33f7b0dee7e2aced2c977265bd28cb038b5a17e51b8faf739a00a4f0f45fc068490909e0d6cbefe4cbeaac915d04fd4d5f760780168e8906635d593e2020cccab80833caa20ac150da0952a317a2131afb52c1661a646f033cb51afd500744b8134191f7669ef32354d881519725f1f16b7c85cfc436c233878f371275a0d1396024e4b6b35eaa031ac78ef698743ea96753e9d057aafe1e0a697dff29ef5abc292221bc5a198be25fac39806bfc304ad9772b871974aae89f15b23a77a1db17138d0b75f8dd83a28f97ec3ed653ab0cc49deb468a42807a147b4289c4755349f6b69cd21d8e0a4558f7671c0d56cab38ce75ead9bdcd3595437d78da677f7fc07bb918450b1cd2d64795afe4a7cd50dd8b55da6cd0aad8f5aa8c00c72458715a8f27d5a28e6372065505095b91f64387282ffce22053aa87b4b73607623cb94b35c0c2d5893c27f183fdfaa7ecad322e54afdba76529ed378c86fd57762f6dcf1f7a420b2dc603d26e7fcc71dd51d09ed4e063eb4a8dff30dcae753cdfad31fff17e8d65d92ca3d369488a3bca3aed95769801de87d347278e9c7dedb506defc4f6c4a313234effbe75bbcff65abd4a87fabe69ecdccd1be176531dcc2502aeb777b11910a54b7c291e112b922d0d43242f7e61c53935e376306acdb3c177f958246c947bb9f20bbc7f352627f85740785ac47c96b1fd1b9bccbca3aaad4904d960e581c8e1cc4f1102d0a750a61436be13235234b6527672f69c211b7da51c14f6ed922168fd09d9fe9df7468230f6614a0d635ae6870c4acdab90e303048ca4a9774bc0cb6834d7a4a166fa33bb5f3e4b8ab2baaf71712ba308c5389f2a0ff78c911bb06b7a9c9bacf162ae8cccf2fb24d20af6a4877f83bd4e194f704e7cec300005ad7e89c1a53f43f08f3b1eeb39600f7c14f4a06c9bb3dce2f3c0976681c9150e2967a826634ef0f56f721c8af03d78ee94ef83d0c186e9cd911a6386cfd8623b07be887686014a90c71be50e3a03b002a588aadcb1edeeff791518ebff3e72147cf2d2801b7a89e9b534226a81e06ce5885d48a4cf6d3e64a7934b5b84113d72e36c3949eeda855959e52b9bcae949f1d0d39319bb19424cebb5415a4b33f30d059a2a5f917d6c3b386567062e06423f3d1d9f18b1bfda209c751604fd99056bc5f1d9c8e9ee0cf209168a7971d1cfd4e64cee50e176193422222d9dc9dcb925b6b684be09f1900cecd9c332a6a7258a8cd45b52d622f65b2cc25d5aa1ac3bd1b26664770a244891b1eaccc3983b16c0ea29036f3c53dd1ce1f6919ea6c7c3b23f793846e712f23e19075c43cb9a22c23907cc2703e60cf47336f829a7563998a8ba91427dd08c11c3dd56add7007968976989a1303717265c519a0bd00a23c6a65e61d5286138ca7f89410a95737c91355309e43d7b5e706555748367c730ba920c3b652301969069b87a48c4de50027e037622b28789e2921fa77360af598c0e653f2e867e798282a3c704d1513171c07b196684ad0885f9432297f7dcbafd16f4516f3c1ec38f170769b673238e5e2d98a0f690c01f533bf9572b8ac0ea77301bae40df660b9d0a3fa3e7e89b65bd08102e33672a3da60d782e8f7270c352c2dd725bba0c0ffd9a2b73eba8eb9f347833dc1bbef417148c674c8355778577a1347b53db24061958929d45011175fe559d7599df4686c0d3f66bb37529f09adf0c1bf516e8d9282e5f5895fdd4ee6d0ff1240d284d9053551f86699fcf50603676535fd8166866491705c4ab95a22a7824d24dcc87c8aa950e87765f92cbebfe2abe3d42d2304f0e10299c78d4b62f5a133b1fdec8c6e37ba9c43d8f8813f6b1b4687177559652a0282d82cdfc8df645cdb2fafe85626aea789abce40c7e7dd09e53a67d672043bebbdad8c21a409700be3da7772584c82fb4593e801f251773aca66bb71447f7aef4215ba700641f9a78a53761f137f3aac3c9b2158ead468530039deb0b39e5ab365a1bd675116b86f715294ca3e64042197132176d2a6503da450b08dc799606a54e27b8ea092b3479f5650bc485cfecd6398dfce4bb96dab5dc9895ad20bf30c3f1cadd661897cb9d6c49c22c5517b2712cce65b37e76183020c20def0a82ee65625c265f060e9ad6e04f05ab3000ea9192cef58dbada4950dfcbc2dd1f6a2038465b4e0ac8c85257eb540ae84e976226afba080d102a7044427372d9cca9aa24e77f0740b55173c7a2f6fc5e7d9daf9ba6b4677a482fc20603e77ca22ce466da1a48fc7d25b8ffac7e49653e0b30a96140705c7240e8cba7a656881f422cf37cd92ae29984ef1cdc95dbce9c99c18a465e43ea038545c0bef741d805d4f282a70c195110154a9d33f85d43202ee41dbe127ca5009906461f6871c9b722c75cef2284359ae71479281bc67e5f870c6e8e9c1f8404bdb0f0edd63f06db93cc0de1cf060bcf6aa6b100bd8d70f79a4802887c63ed58efe2eda31bef9388dddaaf75373317169b344151bdb55bd5e36680bfce05a2b2b5492d58211bad2cdc2385b5801c6a4d9e84b8a78fc54faff8eeb1e08ce9fa8ec32c05bc2771f4c4b2f75d37f3033ee8f175aa5a603303dfaecb90649d9f87d9f7e3c8963a2640b932f424f8f817bec27a599ff2bc80083084945c516ce52cfd94144055a1de53492d31991b5bea396da5bc6e97b5cbecdb05deedd703115cdf03ccb7b9e077bebb046b9f7445dcecc2652f3b7da13982eab33c2325a659f80762e91fdf9f2eb86030b846c52fd0e50d0302a4a0b2c830cc56696b3f5a45db6a8a4d1e8e30329773195dad7427cbcb65682f3fa8d344cd0318ca0fcb66bfadb74959227f66a06cea5b389fd2941ece20d48a939636f7bad3445ed5defdeda456341b0f1a936ecb388a9b5b6502d756e8e14367605620e52465496a39f7e00c7e8458300f084081d5e37a4d9619476cb56c1be7778a84a6020c85dff06cc4485683d0252e33dafa80aa6465cb020535cc3bea9a14657afacf66a513c240f6593eb0ef5f1bd70d4ee1017be0c6ea5225957a4197020be7432e7bba4d5e07af60dc765e926a69624d236473290746baedb83f801cf7b0fdcd71b3de2485e402dca546284df45f4e4e5d9dd9ecbb98d723138555b685e4a799c82772973fde24ecafeef6a1dc8d124387942e196ade8e62e18a03a6cbe991035138e76eb5eabaaf2068a50c2cb8f24b48c955c7329eeca3d559ac390bcab234c028c2914c4e8075f643e85518d09991ab16a328005b2ca0e8a1bea91a1cc1763e22b8df75c247dee6441ab975d0f6c48fd9276c2de4d4e74d1de25ee86f75f2a67a401d4068dd08bf444bd1393043b022cb528ca2a92aa3a55367eced21d03659976ef3a27b5167e0d2ee610be9d4c38243ca9e757ced737fa57e87fc3651c28c4e4399dfa20cd58737ea16c4f855663cb4567a0291251f04239ba202516fab66a96f307cc0e94ccc9ef5b79268bb75df8ea84581d142814d5ceb5425ee678439533a9d8cd05f65937a782cad123f0c07601d36cc353d6289ce1ecb769d35e2c54a4760ebfea5158e58bd451ed0e2736f6892700831240f9d38cf76aae1e8ad9b44f64fdc6ccb9056f205ec59d3f52389ab2aa7

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