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
9751c0ae26e4bfcd071a91ca53000d91487f15db46a9a61583de53f3500f23c6edadb779004717da0ed38bd567d33174aab2f5651fb96c03847bc0054398650cf21f2de3a19e3c5e70e84b3a5525599435d3d7cd5a9b16d813fde2bbccac95381a7ef93bb445b5c77c4fed7d578c4fad8c5a727452c1a49958e29c58124a5b27a626817f09b4e85b67deafd59e4bfed2fd2147da445a385c6a8764d936cb31df0de8aada740e2bea1ed11b6ddff00309c70877dc38b996a2b8cefee61a0ade4710161f67e0cb700fadc81225d4b205caaf2c3f3da6b327aa0f9f4eb73a25678033e056fa65dfd600c27d01a92785fbc1406064f682a02adf8cf3433bab8d071a0e50e4128192c6de688669bed28d09369525b66c04580fbd82799318faae9388dc076ce316ecb12b12e97c3db907f6d6c154e62340705af13d8cdefa82f3a6d68659b1e0df9491cb4477b9f0913e35467e214687a2ad22bf2e319afbd8e8cca6a9d2e80ad33c9e8acf630604fa9a3b18111f1fe8c256ebcfb4be5ab7de03b03a44451ba3f46bdb37a0d8c37bcd1a988de35074aca6e24a91ebe9ac4205a44eeef3e23ecc53a782fbc09a3ada98d7322de166fbe46404bc4992db8f709809a12f0f47656e3069e085131e38d758e5ed49902074373e6b0e54689b7d6e4be63ab571fd0a55883e5a9a9e9b1bcdc35b1928cf087fffc833704549f7ca808dd06203653df14fc6132f1ff63bf814906ce76f1f9b3cd2696d8934f709ac88b29d9ad68ebd89c050425c05d18fbb31064acf1b6f8195209392e9e89fc2f3d9e6c71912ecae01f75565f0d106fd93cef4de39d4b178e5d1ff621235f12eebdacb74db2147b31d2b3b2ca69847ae731eeb75a2e5bc31404cd375df1469244ccdbfd67a29e88a5ec685b5e4b04083e9e1f9770aff5ed00be88f93c8b9ebdae0607a69585e79170a75ee1025252be8a5d309e0772d186ba8b3e7586b3feafc9027451a308c2fc4811d467e02d11edd9b61421d98dc9aad5c336119c24a0ac30ec144ab432b855db9c7ca71c6d23ded0addbbb8ac752facee2a8db1aab709f89890a09a2491283df90dea8c58b09f533dbd6b74c5e8a773c256443f900c7116733b45d194c88107bc7d65c2f4193d520621c40aee133cc4ac83501dae0faa429a9a775b6003ebeab91affd4eed501022cbed1a02deacb9834803be638ed1977abbac9851c903f3cda8654c56f5f57b11b0c462ab39e002e4784fdb1bc2ae4f3f2164faef5d8586f3ee8220e640702b815c67fb864f9ee4ac09c702e9d682949dac82c76e12a42f2e791672876d3da817ab223b79c76dded6cbb3072c17b3d42fcb6df2723edee222a43c021e085f5685c0749fa438d58e75c8250806dd4d363b397e9ec02195f0b6d7beb30d11d18d49e5c9152a85cc8dbf7a3d3768b26b4f889e8963bc1841246db71c15d0f11dce3da3550307c7d08084b61049095262b049916d3bb7d231cd9e79d549645b24d38c4ee803efb42c127765dbbfd4ef7347b607103946f65c6a1e3df5d8cf676874b79d56900332be2eba9b6beda4f2749b3c4415c439806d94f1bd5204e1652a8d2845174f8ad84c35fd182c27dd21d3b1337cfb8400a1de73128e5daa6587e645aa9d62f384233b8e03758522ae89ca9142cab51c71ae48301cdcce3f61a631813cbf75183cedabb40610e69bfe144c2ce799424bd3404a3d53fb301b9032b243240688cedfde7b615d9acf5fc80901e1aad7aebd66ad0999161f268f91f0e3a936769b7dcfab6f970267a0afd1232c0c40c6de581cab8de933aee9d4136d89ae1a801bd6d7b6173077f3e03815344030c65b05417a51da5bf5df04e54a09eb149383084c77d67b9037a7d6de2d7bf6cb71cf7ceaed796468723d3d4e6a948dfca20421547e48f8d4e3774b33cba8ed772c33418992903359a81637c80a78e0aa27607966a355d929e3d30ac24b858f283d270dd03a9ac00de2b890be304517660477100ea74b65de0cff63964ce1a3e6604a143bebb165f1e9b8c2436d4bf01a99fbf803a9e8147c90bef299a4c07fbef4aeee94ad72af786de1e3583707e662ac0d04e9a5315bb605791819bc22be700038cae949df12444d814ec44f62949ab86db1f6c904126cb66bcf58f6e50eaaf95165c16ad60fc7970ab43dfcac3310ff94919a7348390a5e5429f64000a7662eef83a82259f83a925aa61352cb67dffcec612e444abc200535962b4dbfab85cb75964975252e713c971d6e6811aa40e0828c159f2a73655f7b38dcad090f2da4c581533f53f94630e1dab3ba3a0470a5150bf8be156e4eb26cee7093e82334d917f82e0d5bccb45cb1df644ac95e998bd82157573a8d1791b8287f7ceb8015a5a3e2103017d0a182b429f675bb82a243cbea7e454d0ce5c42b7f1089edcffc47d8f4356638fafb99cd9193fb9d3f52ac96ab599071344de3b14dd914add0233b465121f969c89086c36955125470fe3bc3c2cf5994a3804096bbdfdf7a26ca253c7c3ba5e5c7c114e5ff42be34061cfa12af7446cd4a13402692fad2356d77c9c3d9e865888d6cdf08bca836c8e055c52b8baedc88f4c18f3898b5f3ab56618186382f4d369bd81d9c831873d822b959006b3d842490f19ca85846cfe611ef05c5c030d18597bda8fdff291a675c380af87cde5748f0481d12b66306c42a92919acbac513db7a2a74d55dce0fa612600d53c5dd3b7c758deffb1b180542dba3ec48fddc73b0fd9469c07b263562c60fb90a83ad16c9dec0f654c4234b15d9cec37f0a0717d3b174d354288011689d33a8e0e141fbe825a67557bb1a8ff275b070dda4e0ec2be8ee81f4e39dbf50068487174de6dae3c207e5253b5902fb87bf3a3159e1ecf44e766ac54938a4b89e3464f19b2c63aa24947c42dfa78e334deb2081fcee7659d061b534b3748fa03f74ab60025db3cf705571bee67e505ac23668edef9a3536d705bdb05100782b3ae68d032a1ff359045a4d545621ba3da8fc7698ab3b3af368b6d8d8f65ab76dde6860a5c5859a68f51bdb0dff71f4d4bd9546a90ff1e7ac2fad8ab0496147e151f83af7468c1454a18cb557735e1da3ec1a0339dc31ea424b5ccd5803fc499d85d2ed2a612e927707bf4bafba651d4dbbaa817b00a0eb3f8456f7b7211f9f78e57f2a3cb9d46df397185fbcd7b20bb2e60dd6379c2ec72cb9dc1d1f0149c9e6678f03612ffbb4d8921de3a585ef695e1edee1e991b72d28c5af3e9cad67c982c139706ace3a73c5b7857484e4b42a81451910889e3d231c3a34badcfdfa6c06c8bdcbaff3f9ec46989081321e08c7243e08e366ba1ea1b44b8810710e90c28c72c43e107ac3e646728688660ff5c469555cc19c178c517fed9d3a1cdf23438c12b26c459248530001096c99e8c6e0fc3767978f87082d0d34593ba7f4b4a5f34dec99de8bf022f64484969867789aa911fd8bc4e770c4a1879e4c5e6811c7800fa0e32ead5839b23ad2b5d43984fb046e1e5c51b7b9b529ba728e22b7f55f978e404ecf7f923d7f6af1802200937f4389027483980224ec0a414bd3c9714612b704a50e93db6a50f93d6e15bd36c964103e8ab4997b199ae9513df92f8e2f33b157349ab1a0df2e8f7c36dfc815d77e3e6143dffafa3c9d1d57f77111739cfc0d64bbbd1e1cb3d2087e23f016af8fea6bc0d197ec75001f0002b971a0e2c2992bad4aa331e3d24085e8584d346b837310982e02214ac04cb1c8f8519da7f0a0e1345fa24ae36284dac8cb147f2b151db5deff8bc32177e231bb39a1a993c2fbf91e1bee72d8fd423bc8ce6e8b288fcf3ed4ae92a6c67d8b5d244a45e995e6b59fcad230d0ab64d0497eb202beb92f03bdde9be9ff90a4222c03a5c2ad809ca5a8ce306f859a2eecb035499263fa3e3b537cbd8b173ec363af4352423b96cf799af6efa1d64160f31f32baf1d19a859a5e43ce5a0109b61c34812b30c0541c2dc93ecb7b0cd3a12a6b151638c3697d2bf908ae615a2735d488b981682b295a004459070a0b87b48bb6df9bfb769e0118094f629ca6a650bcdf5e1ad5f9d1f86d705d4faafa66e5af8dce6b7fb7d969e19ebb220ee5e2bd9f348b2526fe19b70f96991a13988163ffa50c377472bccac2ce13ffd8ab7bd0b40b8fe626d99420f0e0d534326b71f87f88f466bdd83271cd50def21b465350c954a1eaa709b8ec4f3c11ffbf9493cba74ca640fe82f8a4e884968c384aef1fd01af2129ab29db0a794085ead2911986ea3dec57a4df03fe2c97130469ba0b489b7928923b01a2b322e080ff92d0094e5887ea81bb43f64b7ccd4d7031ff14c67e99dd6d6d4f4cd79c6f3c8d6dd2698833d2a60679c53324d461d990d99a005ab99b06d876c1b958e71f9ef6609a0ff25df930e8e34ef7acf8ec3f975a1a7a5a6d45da5df16bff901e4f68d8bdfb0fdcfef9802197f0c17bb1dc1dcbab3dfee566d009aa683b1041f5583b9c39a73658e921e558d061d8ef078be8c8485f7e136b3415d32e96f974f8566287040f7f8a616bcc25ba74f70520603946ca3f5038e97fa26d7ce93d652ce2b7efae314035c181411f00f9c242cb6060d9373b11f755d10a554886c4db3505e2ce59c5efdb3ed8cbad20bd18cca9d564d968bc3c251802262aa38b58f82fd633b3539f4e567542c45ba858d7de8be0cefc68a39c7b32d116de107a448d27508a66a8f5af595eba62d0571f50c3d30630b833de8ada2f81d4e146a9b35169bce43310fdb9c49552102caeef1dc4b3a43d4102447cb5bf5e63107beb924fc823ee4030a56238bed1f40b98fcfe88902eec63d49bd1dd60503a113ebf48981f84b905289b2bd78a318ac8b38e92560b01201902b68aa18e09711dc96e19386c5b473b1215c4449ac1c6e6d041d0448e1393f4981eee69a260a8258cfd7ec805b38d256bc7eb97fae643aefa48717f626467c02774f56b605d3d8a0817b50f90fbdaf17c4be1c44ea4b88aa91dd9521c50afc418b26d304e0c5b8da988f82efb0b123e0faa2e76829cb9744199eb7f3248f11d4cdf2e29b43099571270c0edc06095001dbca5a3a7499fdee445e0838bf80d98de30e5816f1d487287cefb684be61bd84900dee42556c9e76287581dc1fffa720815e4b5372dfde2a5aac67068804d8d8f4fc670052ea43564ef2f1a0aa32af9f892325ef2b060c26335e2baf9960fd36869ba3f738e6f27e68697ecb62636d8584b527afeeb809fb45423b63a6f8b28bc0454af34b31033811ee372fd86fa0cf244c63b93010b796290fbf9e668629a48f0280b3e608cc431d7fccb0affc2dfd13d717790f934934dfee015ebb81dff4de63b9725167fb138757d2eb90e1407ba639704ad0b0b999a469832bf513fbc668a3f0d8f494fb0dfddc732a0d06fc01238edab8bcb81f1121a1e40ed644dfe06b5cb6d36ded54c964c94080e504e17639e3788ff06e9c1a69a6342d8be919c04c159a48770f46f5449036dfc53d1452c203b0c458b3a509b7f8f4d35729a29c45e799b6c2ac73bf6214432bf93f94fbe4f5dc9c58eaa2f0cf6bb77ba10783714ab58056a937a72335ce1ef86613d54f4df7e743835c25a9dbfb2b4869400632c864915f8b1622caf8dff96d8df8d0aedd936105aa5e63dd9c9b92c51c302cc28d61ee1185889732bd29517cc90198100009cf5bed45a0e34574357de0bf61f2467247f43d4eeec52162947ab132be36d72fe96835c901d4b44b3a27ffdadce80ee10487dfd14eecb60dc59d7d791cbb839abbe77bff5ce45e21e1ea3f0927bf1a08aa96cb4ee4e1e9198c4fea60502c284f0639
Centered contact blocks
View code
f6e06d1abcd5cf3bc16167f9dd085c2899091d34c7addcffcae0ac125b63232c87f6fb7cca163f1065b1624fc37b654be9d79f81d31d7f6a57fab8cac6f453c20a328a9e374e0cbd9c528464b29e8d6796c0567d7ef51a7bcd4795d4ea8f35699f175ea388a1e9c52bce4e527bece1c217b1664e500bb4d55ce0deddf29b53e2e0e040d97df22b42e9c00e794daf94e29bfadd11c93296ef05b0a12f05676d110d111723a375637f849a912efe350a7e98ae60d4c25323fa71eb1ecedc1d8c2d1cb660ec6686367e0573f2fae51a85ce631fc60243bf015eec276c68b5d75b10749febc2fd90a20133fbfdaef526c79ce12f3e4493f4d515b3279338f83c760aa52533184cedaf934b8cc65520b5dba9342ced1743ad4db65a46b30d927e18e37b6a6e0d1d8a5aea5e7af0a6baf963faf5837ee60818533ef128d514375aaea4a9a91e506e83d33a150af5fe72a4046e3123d88454ea852785df2541a0982735b6b175905056e3305a7ab4918190f2fe00cda622f91c5ffb9d4f7c30400f6b60c50d9ba255ab8f9fbef215d9674ecbc26feed862b34f1686794d52c3d06c4d7d7572fe7e98c891d6701f44e334d44aa827400414d3e6b0e80f0d23a643df20c841fda9f8f5b33d6fd7b5a70b2dcdb764992a197bdb48a4bc7fdac3a6219202711596cabb9b12be2c41c18cacf574e815c5cf1474795effb79803a04f61dc75eb53a408b751f7042253ffd7a5ca7b36d4fdac91a7e1ace87035ffe515a2f6aed131d6ef750b0eca5a23ba6a457a158a7b4b22e642a2d98165db7a4612d85d375343e2a14b6e9268064faceea6c4ef0388f91bd3f32a6d70e0bd63a79863e7194d0b184781af2ca57eaf3eb40fd1b14bc803f0ada520265e287931cbcc9f6050cb94becd38344888e57d28313dcb8ae00e79b50ffcfb8bf2197f3f13ee326c129e2e8caade33e45aeff470125979e9d37bb2fcfdeda9cae22da5f84a5096d64de3ed9dde4ad8462de3185f1e2240d4d8896507661b52f6b2eb1d8d378df77006ea3b7c29692e4fa050716cde0fe02dcb7f0b981d7bea201559ee8c21b1b3d731bb1d70dec93d5f368dc77efdbc0bd255b490a3442e97fa0d9f67daba5f9ad45ef108a4b0f3f82db21430048c6a935ac32bcdbfba074a2e2a699ba2989368559e3f096f7e537fc0c3f50b407b3fddf2ed7ebde4dce4175836b9404429324a9db217ab5d8dbb7a5e2d6cd7ee4ddd7ff376ce911b97fa3f814b596f6e22c1f358fe9b9caa29d1b9817c3058a33f1eabc6d0af1bf7dff29735db5cb46dc9dc7976c528eeb8ba180c372147f3f6c31f4c9d43c199982bc605fc80daff17bb495a8050fe21a23649d850d7bd703539e2546a9657e9351a0ee91742b7a12d29ba400c53fe6f7eebf2df900695978685f8c9cc5e5e8de92a9eeaf1ea295cdd24c867849014d96e461ec3cf03f54b57359ff0e350e9f39380a4d270708ddf20f89fb46770b63418b9c140c01a03f7b46b6b71eaee3fe898a3a3ed5d4884005ca17ba4f82c8d45b3b0ef2ef15839c3aefd74ee3f0d4bc33ad95bf4d675649585f053598eda1e242c944aa125fe35f656ff31664acec1382c41c9fdaaa23987073e9874acb3b4945d0e4ba7b95f15f34ce24dcfdc7a61e156041d0cd08546e17ada8e5c9ace92a8e1f32184f94971a95dfe4f55eaff4e60c5a7439c7cd962fe92b3553e3e8a637eb906c33a8620ae6198f8684f0fdc9358c4f87392ae853c7d055c0d9d6d9b64436070de1da7048fc4d8e2020def67d35b46fb820315f26c83823ccc1870ca3403b6cb709ac74a9c16622c0819be32ace0144f94da5a0c5c0bfeaeba076be356221aa987ef25cc9d3718ff263de2b64050b9e116db570d0ed3e33a1fbfbec38fe6dda6a686d35cf54d93512e0884803a0e0940a8746aa42c52b20e15911784acbf3f492f6b0a5ac2432c74e341cdb4114e4a8e453a5d016ad7aa7a29b191106c02f497c0a6694aef1527223ac9cfdb8279efb639861813bf032608089683d6b4e49f712def4c1ef7a6f41f323fe758ab55aa0d1bbd4937e6f7ca8ad488ea2c987ffb1588a611ed863e9e45fb6b50675eeabc8318ad5563b81911394f6a32c9e36b8e6f64ab9463cb63ff2d69a2a20de9850c1fce464708b1d1e6ac45ee80b7e8dbc3075184372e76171f85c5b6a7466f59ea209abefbc1dc3fe9a87cd014342ae465c1330af86e898114eca987073514e3074abbcb8ddd695074287c7201db39cf8402ba316a98c6d2066caa683395dc55867ed0eb30442b23a559ce0365aabd0035a16a2ab65ce23f3839d32066fdb9228344860fa95b83675817d841904104a9c8985245a2488518001ec6688aa9af0a81a66b5b08c243329fe8499c67c89d0f3f3652a6a1427e5b6bc1d4a9b58842c9cbff683deff550bd1560467eb8bacb65f7eacfb037061e1e902658af782fac18ec923373478adbca885166b8f8a460665fd27645c1463cc0359114eff7dff7084bb5f66a9d2b3dc51b772809f3a101595bebde8b98886f0c2d3ac10eb52ad09efcf859b474d0b61da8e9cbd4613125b93305ca550179e078443a96c761f806f6c59d8982398711d6e0da70ebdeef4a2438c8dae50223de4d9c97c4dace5e5c98b81a3e6eb5b66e136e91e72a0f3e08ef99d722ae5c7fe4d8b62874e8634428a5f10e796fbfea77ab747c2ce0981783a9135d9a3123c4170e3e62582f047c66bb0c0f613e9a02df9c8221800618f272682407c33e6d26e57cca8829068f5d152574eba5417545b989bf61b8f1ac473dd643ae2d9a093a3595ba88f27ac6349efb64e3e96257b3b23f9a504b82064365eedc337b05cb50b965feba4804fe38cc2a3bb075cc2bd4995db389567eaf4d0182a87b40079cf6331b366d4801dcab87bb01d86d74d48f001ddd9b0a54b35f3a6367c6a4e025a688e88cd52b53d622558f3236ccd7d194cb8eac3e52e6a3304d282cb451b14bc0ec0912da52fc757f678cddb7c4b2e6e3226980d6449e5acac49ee41d4bad781f3b802b58fabd3349f3f3b8cabadc6dfa7525910e2d1e9f4f41f43fa3002f09519890986dcb7d9f6dd4962afe3f5bd3b762e1f8e5d8afb6aac62d9212f267b1c6ca02c1972b8201703cb57b987122f8ec9d9a2658d81eadaba254a1a8de855ad0771e5bed6f470198146776a4eb0e4b5b944a17cc3ba5ac0fb8d8cfda12deaaa897299987599340afe1aff11223b29084f455ed610ac189ba1b924ccc4b54ecb7443a2e51650903b06357d03e258b82a5c41fd1e4106ac00aef202cf4ffabd1632099b3ff807079bc602fc4ce551a907c282ab066266c3e6ecc352b35df7ed5d0c6fd3fdfb2ef6b31fc1273d7cbd6a8fa9fe55efb59582c53ed46f67ab5fc8cdc284e0a261e80779dbfa0b139b6107925c8f6de293924241604e9a49e45068ce5f84f37ea08f6cd528841a636bd8bb61cfe627fbcad788cb16968a4819ef78ef37af7c082912466574c732354471d72a7dd0957e3a342a5a9c93baa2338d8685e9089d9c297567958f794f2228e812b8fbeae6453de367653bcb7aea405de4476edc8b6910f5d0dcd7abdc1a40e878e9a7318ce0d68c0ddf4ee391c40522beeada0fe80689b5da42a3f1181916e4dd0b30fdfa31804ebf61c739851df38b69c7739ef880b2b32283e7b42791ecd23399e314db4d69ad67494344dfd9c185a781e24258f8e51ffa4ec5f794f092ac3f828a4bf1107658e7c7afecf29cfdd84b602c6bc1ead4f5bf952ba539847725396cbb6b42418c2e81f334e9e6f5f2d59119e24ae630036c5bd62e3a1274b11c882b87bdd4a4ee968ccb76561a01096b27295d3c4d0de53f03090bc255125e23d85e7ccc3f93102395c85450b0a1f8c54c5f7d0dd306d5d0dec46dfead40cc36c82fb84615c9c293d10c23aa7d549d32aa37ce053c76fc72e7703330621daa675e06c6dd742df5bc965bf93f76d81bebbcd0c05d0761faef7913ee3df0a9a7fa09d9416bdcb205d59e83841db992f7d2bf183fffbc85d4337936a2f6b4f499961c5519306f29dcfbdb27852bd4c08eb260e50984e5dca08f82a4e37093c7c2dca7f3aca0ce0ec3507a110133eb2c0fa723dee187bacac30668fc08c35147a95147573b58fcc98d39451bdd83d40347e67a99637999dd1a4f9bb41d6d0ca3b07005a322a156db533cfd3788b9eb3b17fe04134a7d4e54986d58c131b65e10e90959a06f529c22e82521dda78c8f7757a244ec298973236014757a46fb60bc3c47c62b60b736dc72e6d13d7c158870d4084de4e0ff995fabb1a1a2ee49fc8ad805626a3a6aa0bfbbd782a8e6af16d867614e419f27f04bdefa4381af058726cc94e54f115804af56e373c7d23b2793f8d99c371a7e82e7d0e15a1d449e8ba9dc0f143dd4e5d42e8e70c6081f6c5fc4ebdadf57af06059b6034197fe2745db8524ec7d7ea8f2150b3956c15b3d722dc3e5726d5aa13e7f7dc163ccc450a12e014968fc3b3de26b52fdffb29e15c1ad1d4d1a3b93ce76859ee35c1c76e1d8721130c93116e179ad1c48a907f3237b4e3e6b6c8777f93a56e649a27a10776fcf55955f8fac56853e93c6d2f013c6fe72208a3790f65fe66b6698610266412dd107a3b043ffdeb72dc3c744df1ebb0f3a6b3580120bf46122e0beae04699db5188ac04dff61ba9ae8d809fb70476aaf24eb36aa3c315b56f74844314da5967453ed35f3df3e4584be377f5e8570ef2ffe06d992f000a04a91c39a3c5379e5e6f07fed54ed5807af097c41ef731717981ebb9043f4cfebdb3f9c13869825a2b31c801008dd75ce5d58594a1115069cff9a005230a7bf5869d04d89f54388a694217edf0076bfc9419200b79bcd3b7e675cf1e5da66545e2bd1e274c78544193d7eb0423b4579d05428c5eca8c68d499fcc69b6c6fb232f772b94c2e2ef7a54416ced760480aed69fe74273ff6d946fe7410e77300c808b4ccaae27c36a7df974c1e0cb3590b9402bfce9873e20f731b86be548ed901b28c688e660081bb529d5f7ac440623e289f9d7c722ab484a5614e36ba4c5ef2028d914f2e54b556f9da2f9957c8e25bb5a29d801534324e9b429c481f751259e5dc05eb28dfec4eedcb928ac54bd2c977bfad35a9091faaf2171e1e119c10ab0bb9ce45268bbafeb07687344dc9b03fa664dc34614dced8983011e9ca05d6be4a8c2667159a49bca73147422b5c9c3926c971c9788a2982f0b5a9de56e4ecb15e63666bbd24c596471d60bd42b8587938b21e6f42b808e22ef6d2cf018dae1cbd7531eba1f35289fdc9d37c0cd78a90fcf7095a0481e1be37fe0b80c58febb24a267915594f76e24ceaa550fdb51c8d576cee80c0f3584230fe84ba3e7ed4263e6c73dd32ec29db68105297958f906cfb54592596a7f4eae454bc6d4f889a8b2fa072a754f77672fbf0d0210c31b7e53a090cec28cb609258bd4f3449871b0e2ebda9c26c64d1182cefb3297d99bb3ff05c6abbb1a89ccbbd6cad7321b0b2a1a92b7b8915cd43c31e66f9b93f2b383233841dd5f98f30695f5ed0dc5cfc03e7240a0fd3ca7ed251544b499df708f1f78e10654463df9fbc99c7e86e1d854829f6257df13cf3b86cfedc2359c31277deeea3f1e8d19861df93a90e713c99877b7ac4455c4ce3a9ab87d8491f8d948cb8f075c31d2499cfbd1c6873dc3a4a9102587dddb50defcb7318663a1335a4edfb6702aac0bd0177735429804770850cc658d534ed7ed24590fc13d575228dfb7231caa729833f6caab50b9a9331ba0c371f795f4e1518d67279cc9ac50d5d41c65219918e8a75c436182
Blocks in bordered columns
View code
28731f30eccbd37572e4337c04428da7a7537369e5add887d3023c5cedca0471eafc519873985377891b9f4b6472ba2ebbb20f7ee8b168ad04c843b9f06f299651b2a25145478722b7061f6c82274f1603f92bc0980fd97e67cf965fcb33025f9514f349cf40b5561457b4cd3f927220e7a25b0768a9d8e4c8d03d2b99a023e45784910fa947fa7cb1d89d3565126ddd2d3fbfc4730d4f379ee77b1a5cd3263d6372570468ab993f88894c0c762c74acd6e2cebe85fd09113dfb7abc781f0ea76b2fc5f296b71f243a184f58378a206f7988eb05879a66baf58b0b4ce0a8d8659bd35e573f096bdc0adfce28d6fe3a2efb5521bdfe9da2cc7c4e9759733e2468b2c0e50a57327851ed247d89be0a6f81952098c83fc3073b4c1b239bdf5428eb5746a55c912843fc78a224b026a9df545b778c222dd56eac8b64b7b98a627ad576ef1000f981bc6290ed66362db0101c3850b92050a8bcac6361e73d6549efa5de096c24a7d70f007cb023260b12498a06b7f98fa0aa561b9daed5eee51144009f7e74c9b9b6881158b8a312748038f064e4443c3cf69b57fbfd58583b758345c9b143add2faefc8c4f4cb1fd0475ae8d80f07b3283a0d1d9ed3c98025c7d3b57ab1957970ae5af3b4e4d0da3b273ceba30066a912dbe4a2687290f6f9c0492c2e2216ab5073c42f8183a5c360235b687663664cc040441d6e1319e8e76ffc125400563813af90911b713467dc11a2d160d638d5880fa1139f7031b6bc910231fe5ab70740d38c7763cabbfd8591725f8f19c953b371167b39ffacbffdcb43e095255af99f0b38ecf1e4d17f9480c97d495a18bffca865e0f2df6d91514ba825174973580fa7169475ecdb5791dbc8ee13503c0e375f3cbe0edaf84d54e00103a4e06e8a95e03ae90fa41a610c32b206a65f7fb744dc45cd38c2e4bc9dc14ff8829f8f75dad3fc5f4ee30b2fc271e5587f86d800b3271ea845c9c4c56decc07d9dd2f6206989510923df60eaf81e73442775749a2b7b4828634d72cee3405b76809efc599f26593bcce08b9c35d6c7017f87e002f38a60aa8c867a069f2e283d9b8f93e4d34cdb738683d05bf525c5b3b58379856b7a3613d4f186d27b8690d99f4d5de93446c29e3a164467b0faad498c51b0ae4325cd3dd4c1853e270be601071b608c085dd97c67e7ecb7a216254e21540c67b61625fad5cdef0d9992b26a83f666427bfbc63b00aafcd4cfc5e46595ab7c19be72852515940f517f9a7f7688b4564041ae02a61dc11096989a10a7e0aba92314ad93125a5a64cffd3d36ac0f5b08b5c47df83da7b2eb7ab1e0fab328e3f06602c81e320ff366d9e769df390c810046cecccdf0392866d700940d396616cdd4eba287d3011307c2647ef4d989974165392b1bbf957838a9e6785c9ab513ddb9d5cf9b9f2770f8ad605445ee9dd2f799fd1be8960f5af4b5577105b9460ac22dcbffe90de29949fa21cd7e4766d7954b0d89cb34fe5be6129d2cf85d2923ab344d8027ed7e9100d464bdd64ed154d5bfadcf0da6b19a73c8aaeec22bc45aa8c439f344a67aa8ea3883b40656bd1fc1b2562e9968b7ce8aaaf24c5247c1851437ecbbc5cea4d6faacfc53b956477dfaefb67bd16931f678fe3ce9d13fd1be5a70a34dbc94419edd0479a9dcaaaf0b4081f35d3b121efb0c2b41eacb0e6b045148e7855769e52b5e7268961b0cc59d9d28ae16fa7b12c2733f300b74fbf2549f2e97f600cf5ccf83561eda9d251df14af5c958d5064ce260a7cd6a2b1a46c5bc4742d4e00961ed1ce00762ae4a3963881dc340acf0b1a64a6b95a580760820aaa6f314f23b7398ab4ee68bb4fe26ae5ebafcd8569ba12578e0c41320306608ee71335dc4b401b951534a954fbe0b35e57170e0eb5fd964c3ec918bcafc2c1f12a594cd411ef38afe677c8f85af61a8c270a50b199215cffa0ae31a98565d3e3775c03521219cf56e3b4a9658c3bbdb7ed36fc1fa7591d0d97b868a8a4c5db71075deb01f5610c4d0913a75d0b07bcd8d4e526c93bb5d161bc220329f890714de1be5939c412ae9eb5bc6746200e5d5a2bf1005ec3597d4478831a951196c4418ba36cd9e7168d0cfde09c1f4fa59267ee8399028df9e387c5ebaca459c44fee4a6916c89603ce265fc27740e589836a2b8c93460c9ffa01d479b6fe21e1402651c96e21073df5b0bbda14e73676f53f0220830ca61957f2b3fb11ebf6855a9e223455b525d5f5a7b124f192b8255448d395a55f9c07d12b1a3b4adacfe958860dae3f40a2c051d7912f800a0ec7bcf76be0d50c7996a45bf7e74024f0b86c52e93834acfec9bf48b0a693575813f001c687719a3a78e8aea0c4abc53bc94db9b937b1c0797a939e8972a3c1f144990b34b8dcb97dbd23ae046a4caf1d253f1452545a093709d14c6e599185eab01a721565dc9b7af90e3adf815e7b918299a3299d7185bb468183f943867147c62d0d1e538518fa25390cee9c31ef940504732bbce406e06a3dfd7c0933e70adeac1cedbb37389dec2637ac5dc747b695388525a4b1d711c413ff1f46a28f369ed7b4a9546e2c02a1e9f06e2f033c71e4e6f85aa1ab6569a41074d852552462291e46f24413f1fa1f30c1ba6945cf8e84bfd4f6c6e1220be2b097c2519fb799b90ed2ce531199aa44347c092cb7faaceaa9b4dddd7b87d9d8d41817f401221bf8ad2860f6a849fbd29ff4c429c0ac743a036040cecc2d3fb4bfc576c3a676924ed4f5c028f6567e6153de4b23a6e9f916112fd88dede06822b95f9f320af12e96823c39a17d2fe6fe50d014a72f095c073ed27b65672096a4f34e1e73bc3a786eafc04fdee8a42522426a3d3331722d8b3d7d9be46b8779c5552f1e5cb7d354409e39041dce870a0c6b32b4c16a6da1c55e90c1c0f4b35a31e5c16893fa33b02d2020f7924351834a475447578476c9d24a8b0855856b3dc97b5ff9cad1de0c99de7cf5d1ada74daf9fd10bf568f5e00ad5b977f583c58489a6e339cf1ee207d69412de9e85ab9100a1c68ecc513ef64c3388d496e66e6eec4d2655e0c795bc09010f56d3fbd6955d730d24f893afd7fdeff2a352010babc212054ee3565373f73d9cba58545af6a1df44c45e2799b5859f984cc5d75dbd0ee0c3f6e18fec8f3c2f8a04dd2a2d9e1a9d0198664567f9e830b242837fb7b441ae621bcb43c66420fd0798445a4b7be366f7eb444d7ebd03201e498fa8102c51e22e9b20cca129c825529950328c0be4a652948af03e6584d111e2a2fcfb9c4d7392ab84473ba6f390c07d3aff68c96da4eabeaa69367fc6b339cf2d75bcfaf613921ef634132c6af89af437765d2d99c4227c27eda31bc45c072777e808f4ca0085e4fc262c544ad44fbf9c47498f8e7b8cfd7d01e07c9a7b1852472c6778dd3328e32df1d377334c09339b8c5d92745ee770473b895fce2ba3ab8fbbe79cd801bd6bd137d1f2f4c1e78af4aea9c746f288f1bb527fd8e23f0538db16c35d7b52bb62c34c0f449955cce929bfdfbce44170d452866ce76f1dd4b93864ec74b8d15e28e506922e261c891ba81ded18b964fb1aaaeeeb3d8f34c9d0836315c9dced1e762b8d7210a95cdca402820d7f370e2c244871556769ce90e7e4757a50dfd7e112112d42e9395cd70de05a0865b98bf9f6e2161b4c20051b4f561ef60ae134adfff60aa9f0dda84e55141d622555cbd7527d9f8ec093aa20742880bb422c991cbd0ea2daba15c8ac1366a4322d27613679ccde2e37d3ef5813651129ce1a1a7763150c47cac099914bfe007c92859b023b5e71758ddda41ed264d123ed0eccfb2f4cec6e0935b50375cb1d5635beda5c08263ac15a972d14da62832e0d8dd01615bb93812f8fc7a07f68eb6d4ca548644e566578d66c036630efe40fdf057e92c0fbf013c269799c55a6e27eefc4b3522e1277de79ffe79d699673aa627e2d1601a2b83a5ac97e99329e2a494191cc9200465a186d5d4d5bc45bddbe1e7bf801a36930387698700d62823ab820d86604fbc4e088e98ee78b2a593e9b6b9f32b5accb299efc2bcefdc7d44e6e457d7a1feaa0ea5675d8037da5ae231e173b456297b23e82e93b4dd1e6b20a9067bc267d3cf3dcf03f77ed46e93ab508c4cb7748a1b2a875a300cd764b6d01f8729a275dd75f5764937b537912f6fd687661a8b849990138349db3a7dc49259733c9c496037b3290ec15781a84de8ff9040d06349a44bbdc1b888ed21c91c2c8cbe4bb91b01df4582748074be66e89d4219d3e9dd181755ab1d852cb0603edd9be8041f3c3e355fea2909cb7d5e0c37e3921400ebbb78e18c88e349fca9e3adb1dd791c9f19d3a038e888b5b7c01fca4cf52590a340146d2cebfd3d316e5bd8f2e9e3f9eb883ea90b6c476edf079561713176aff7351835c66ff66e5ffd3d010f13428db12e7880ac92dfc37f37dfe3a50bdbe5e361741d3099f9ce9bdc985eb4337f70a134ab7572adac8fa8c4fb9dc9e31229ace2136aee6d8ee22ab9fef84842bc82decc50c12ff1af7526e0f3965665f98382dc9dc708625fd067efca4194da8b49de8332509f140817186ac64f89666557d348d25e835a8c45fcb535861311235028482c3457c2182601365a64bb302fba01e41fe108dee474a084d319ebe26c90c93a49ad03ce328eaae20ae6e49fd852ca2055277514288b844cc3c1fbe61433d3869426d97a4e197b20fe56a227764f41c4c6e962748a91f6816de565395c161e500da2dde8f043eee2c2e4d042473da793f9b831931d2faae89646ada0f7de689f8b8612dde25a70f27b803e448c14924002c092ea0e47d49130add5133fdf738e69b3d45d757502dda5efd55eb53a2ae8c4834d23854102143b0913b5eab5f0d3cbf1d93d0aaffc6f982944f1e746c1129c198b9a8667117eadfa4c48effb9b7ecfd014615b185352394742be8ff9520d55bac39de817b23a5119077ede8173cb4e999c41cc4ed87b8039a51fd44baa6ecd524828ff0341fc5a02e2cd7cdd185f948f282fdadfd28e148bdec101a89cbf9d27cb870c519cfc3f9817352c92bd0960c57fe4e214ae6c28649083b3ec9a46171967cd511d7ee08b3b188287e301c37663d0a7a25db73dc46c332d4c3931d004b101c2b8b585f005f8679237bcd0b5535de238076a8b8f50497f6565a38b3b139548b682b5addd71ae9af078a51614dc36974c369c95379ba343f9efd1fa5cdee30bb6c786023cb4b345a0490d6a12de36933fb27dfa839aed247ad94487a40a205910ef6965c82f23f976b6917ece66c9dea67e6b325c23462b04e9c3941bd7bd5c1960a570ea11fb4d99f643a7635d16fe2e241c7db5fdd4c9e78c3a0e82a5aa4189ef306638011a09d9fa72eaa057d328ada504d2067a04a8e68d5e3ba90199f25f7381936c2fe73c0b34916f3b510f92a1e778ae2f4515ff4a891990e52f4b1d8a7e6f181ae7745f7c868841558ef9ed2e116805525673a4c8516eff27ad7bfa7ae3247f31bb4c2d541d6985b6839f9b4203807a53fcf38498c24b4ff8510c5fc5e6069be401aa5a50930178089d926a4857660365e7ed6d4547a6b79abfec005158368545be6277b71515d9d8b4bed0e1d3fffe3af26720f04725f0e41919025a44c6a8e833702914eaf9794f1d912486acda9878ffb1339f853c2c058f306a3d

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