[{"data":1,"prerenderedAt":639},["ShallowReactive",2],{"page-\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page":3,"related-\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page":638},{"id":4,"title":5,"author":6,"body":7,"category":628,"description":629,"extension":630,"heading":6,"heroImage":6,"heroImageAlt":6,"layout":6,"meta":631,"navigation":632,"ogImage":6,"path":633,"publishedAt":6,"sections":6,"seo":634,"sourcePath":635,"stem":636,"updatedAt":6,"videos":6,"__hash__":637},"pages\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page.md","How to use HTML to customize a landing page",null,{"type":8,"value":9,"toc":617},"minimark",[10,19,22,30,41,45,48,53,56,59,172,175,178,182,186,189,192,229,232,236,239,242,275,282,286,289,292,325,328,332,335,342,376,382,415,419,422,515,519,522,614],[11,12,13,14,18],"p",{},"You can fully customize your landing page by using the ",[15,16,17],"strong",{},"HTML editor",".",[11,20,21],{},"Add one to your landing page.",[23,24],"img",{"src":25,"alt":26,"width":27,"height":28,"loading":29},"\u002Fimages\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page-1.png","HTML 1",890,500,"lazy",[11,31,32,33,36,37,40],{},"Click its ",[15,34,35],{},"three-dot menu"," and click the ",[15,38,39],{},"\u003C\u002F> icon"," to switch to HTML view.",[23,42],{"src":43,"alt":44,"width":27,"height":28,"loading":29},"\u002Fimages\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page-2.png","HTML 2",[11,46,47],{},"Here are some examples of what you can add:",[49,50,52],"h4",{"id":51},"dividers","Dividers",[11,54,55],{},"You can add lines or dividers between pieces of content.",[11,57,58],{},"Add the following string:",[60,61,66],"pre",{"className":62,"code":63,"language":64,"meta":65,"style":65},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cstyle>.line {border-top: 3px solid #000000;width: 100%;margin: 0;}\u003C\u002Fstyle>\u003Cdiv class=\"line\">\u003Cbr>\u003C\u002Fdiv>\n","html","",[67,68,69],"code",{"__ignoreMap":65},[70,71,74,78,82,85,88,91,95,98,102,106,109,112,115,118,120,123,125,128,130,133,136,138,141,144,148,151,154,157,159,161,164,167,169],"span",{"class":72,"line":73},"line",1,[70,75,77],{"class":76},"sMK4o","\u003C",[70,79,81],{"class":80},"swJcz","style",[70,83,84],{"class":76},">.",[70,86,72],{"class":87},"sBMFI",[70,89,90],{"class":76}," {",[70,92,94],{"class":93},"sqsOY","border-top",[70,96,97],{"class":76},":",[70,99,101],{"class":100},"sbssI"," 3px",[70,103,105],{"class":104},"sTEyZ"," solid ",[70,107,108],{"class":76},"#",[70,110,111],{"class":104},"000000",[70,113,114],{"class":76},";",[70,116,117],{"class":93},"width",[70,119,97],{"class":76},[70,121,122],{"class":100}," 100%",[70,124,114],{"class":76},[70,126,127],{"class":93},"margin",[70,129,97],{"class":76},[70,131,132],{"class":100}," 0",[70,134,135],{"class":76},";}\u003C\u002F",[70,137,81],{"class":80},[70,139,140],{"class":76},">\u003C",[70,142,143],{"class":80},"div",[70,145,147],{"class":146},"spNyl"," class",[70,149,150],{"class":76},"=",[70,152,153],{"class":76},"\"",[70,155,72],{"class":156},"sfazB",[70,158,153],{"class":76},[70,160,140],{"class":76},[70,162,163],{"class":80},"br",[70,165,166],{"class":76},">\u003C\u002F",[70,168,143],{"class":80},[70,170,171],{"class":76},">\n",[11,173,174],{},"With \"border-top:\" you can set how tall the line will be in pixels.",[11,176,177],{},"With \"solid #\" you can set its color in hex color codes.",[23,179],{"src":180,"alt":181,"width":27,"height":28,"loading":29},"\u002Fimages\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page-3.png","HTML 3",[49,183,185],{"id":184},"call-phone-number-link","Call phone number link",[11,187,188],{},"You can create a link to allow users to initiate a phone call directly from their devices.",[11,190,191],{},"Add a \"href\" attribute with the target phone number to the prompt (Call us) that will open the phone app. For example:",[60,193,195],{"className":62,"code":194,"language":64,"meta":65,"style":65},"\u003Ca href=\"tel:+1234567890\">Call us\u003C\u002Fa>\n",[67,196,197],{"__ignoreMap":65},[70,198,199,201,204,207,209,211,214,216,219,222,225,227],{"class":72,"line":73},[70,200,77],{"class":76},[70,202,203],{"class":80},"a",[70,205,206],{"class":146}," href",[70,208,150],{"class":76},[70,210,153],{"class":76},[70,212,213],{"class":156},"tel:+1234567890",[70,215,153],{"class":76},[70,217,218],{"class":76},">",[70,220,221],{"class":104},"Call us",[70,223,224],{"class":76},"\u003C\u002F",[70,226,203],{"class":80},[70,228,171],{"class":76},[11,230,231],{},"Replace \"+1234567890\" with the corresponding phone number. The \"+\" sign indicates the international dialing code.",[49,233,235],{"id":234},"send-email-link","Send email link",[11,237,238],{},"You can create a link to allow users to send an email to a specific address directly from their devices.",[11,240,241],{},"Add a \"href\" attribute with the target address to the prompt (Send Email) that will open the email app. For example:",[60,243,245],{"className":62,"code":244,"language":64,"meta":65,"style":65},"\u003Ca href=\"mailto:abc@example.com\">Send Email\u003C\u002Fa>\n",[67,246,247],{"__ignoreMap":65},[70,248,249,251,253,255,257,259,262,264,266,269,271,273],{"class":72,"line":73},[70,250,77],{"class":76},[70,252,203],{"class":80},[70,254,206],{"class":146},[70,256,150],{"class":76},[70,258,153],{"class":76},[70,260,261],{"class":156},"mailto:abc@example.com",[70,263,153],{"class":76},[70,265,218],{"class":76},[70,267,268],{"class":104},"Send Email",[70,270,224],{"class":76},[70,272,203],{"class":80},[70,274,171],{"class":76},[11,276,277,278,281],{},"Replace \"",[203,279,280],{"href":261},"abc@example.com","\" with the corresponding email address.",[49,283,285],{"id":284},"send-message-to-whatsapp-link","Send message to WhatsApp link",[11,287,288],{},"You can create a link to allow users to send a message to a specific WhatsApp number directly from their devices.",[11,290,291],{},"Add a \"href\" attribute with the target WhatsApp number to the prompt (Contact us on WhatsApp) that will open the WhatsApp app. Optionally, you can add a message to send (This is a message) after \"?text=\". For example:",[60,293,295],{"className":62,"code":294,"language":64,"meta":65,"style":65},"\u003Ca href=\"https:\u002F\u002Fwa.me\u002F+1234567890?text=This is a message\">Contact us on WhatsApp\u003C\u002Fa>\n",[67,296,297],{"__ignoreMap":65},[70,298,299,301,303,305,307,309,312,314,316,319,321,323],{"class":72,"line":73},[70,300,77],{"class":76},[70,302,203],{"class":80},[70,304,206],{"class":146},[70,306,150],{"class":76},[70,308,153],{"class":76},[70,310,311],{"class":156},"https:\u002F\u002Fwa.me\u002F+1234567890?text=This is a message",[70,313,153],{"class":76},[70,315,218],{"class":76},[70,317,318],{"class":104},"Contact us on WhatsApp",[70,320,224],{"class":76},[70,322,203],{"class":80},[70,324,171],{"class":76},[11,326,327],{},"Replace \"+1234567890\" with the corresponding WhatsApp number.",[49,329,331],{"id":330},"link-to-a-specific-part","Link to a specific part",[11,333,334],{},"You can create a link to allow users to jump directly to a specific section on your landing page.",[336,337,338],"ol",{},[339,340,341],"li",{},"Add an \"id\" attribute to the target element (Section 1). We recommend that the name of the element is the same as the id (section1). For example:",[60,343,345],{"className":62,"code":344,"language":64,"meta":65,"style":65},"\u003Ca id=\"section1\">Section 1\u003C\u002Fa>\n",[67,346,347],{"__ignoreMap":65},[70,348,349,351,353,356,358,360,363,365,367,370,372,374],{"class":72,"line":73},[70,350,77],{"class":76},[70,352,203],{"class":80},[70,354,355],{"class":146}," id",[70,357,150],{"class":76},[70,359,153],{"class":76},[70,361,362],{"class":156},"section1",[70,364,153],{"class":76},[70,366,218],{"class":76},[70,368,369],{"class":104},"Section 1",[70,371,224],{"class":76},[70,373,203],{"class":80},[70,375,171],{"class":76},[336,377,379],{"start":378},2,[339,380,381],{},"Add a \"href\" attribute using the id created in step 1 (#section1) to the prompt that will go to the target element (Go to Section 1). For example:",[60,383,385],{"className":62,"code":384,"language":64,"meta":65,"style":65},"\u003Ca href=\"#section1\">Go to Section 1\u003C\u002Fa>\n",[67,386,387],{"__ignoreMap":65},[70,388,389,391,393,395,397,399,402,404,406,409,411,413],{"class":72,"line":73},[70,390,77],{"class":76},[70,392,203],{"class":80},[70,394,206],{"class":146},[70,396,150],{"class":76},[70,398,153],{"class":76},[70,400,401],{"class":156},"#section1",[70,403,153],{"class":76},[70,405,218],{"class":76},[70,407,408],{"class":104},"Go to Section 1",[70,410,224],{"class":76},[70,412,203],{"class":80},[70,414,171],{"class":76},[49,416,418],{"id":417},"embed-a-video","Embed a video",[11,420,421],{},"You can display videos from YouTube, Vimeo and other online video platforms on your landing page provided they have an embed option (\"iframe\" tag). After copying it, go to your landing page and paste the \"iframe\" tag. For example:",[60,423,425],{"className":62,"code":424,"language":64,"meta":65,"style":65},"\u003Ciframe width=\"560\" height=\"315\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FVIDEO-URL\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen>\u003C\u002Fiframe>\n",[67,426,427],{"__ignoreMap":65},[70,428,429,431,434,437,439,441,444,446,449,451,453,456,458,461,463,465,468,470,473,475,477,480,482,485,487,489,492,494,497,499,501,504,506,509,511,513],{"class":72,"line":73},[70,430,77],{"class":76},[70,432,433],{"class":80},"iframe",[70,435,436],{"class":146}," width",[70,438,150],{"class":76},[70,440,153],{"class":76},[70,442,443],{"class":156},"560",[70,445,153],{"class":76},[70,447,448],{"class":146}," height",[70,450,150],{"class":76},[70,452,153],{"class":76},[70,454,455],{"class":156},"315",[70,457,153],{"class":76},[70,459,460],{"class":146}," src",[70,462,150],{"class":76},[70,464,153],{"class":76},[70,466,467],{"class":156},"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FVIDEO-URL",[70,469,153],{"class":76},[70,471,472],{"class":146}," title",[70,474,150],{"class":76},[70,476,153],{"class":76},[70,478,479],{"class":156},"YouTube video player",[70,481,153],{"class":76},[70,483,484],{"class":146}," frameborder",[70,486,150],{"class":76},[70,488,153],{"class":76},[70,490,491],{"class":156},"0",[70,493,153],{"class":76},[70,495,496],{"class":146}," allow",[70,498,150],{"class":76},[70,500,153],{"class":76},[70,502,503],{"class":156},"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",[70,505,153],{"class":76},[70,507,508],{"class":146}," allowfullscreen",[70,510,166],{"class":76},[70,512,433],{"class":80},[70,514,171],{"class":76},[49,516,518],{"id":517},"embed-a-google-map","Embed a Google map",[11,520,521],{},"You can display multiple Google maps by searching the addresses in Google Maps, clicking Share > Embed a map and copying the \"iframe\" tag. After that, go to your landing page and paste the \"iframe\" tag. For example:",[60,523,525],{"className":62,"code":524,"language":64,"meta":65,"style":65},"\u003Ciframe src=\"https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fembed?pb=!1m18!1m12!1m3!1d1589980.4936041927!2d-79.46503024375001!3d38.89126619999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b798ecb5b2c7%3A0xc7edf0c4a86f75af!2sSmithsonian%20National%20Museum%20of%20Natural%20History!5e0!3m2!1sen!2sar!4v1719328865609!5m2!1sen!2sar\" width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\">\u003C\u002Fiframe>\n",[67,526,527],{"__ignoreMap":65},[70,528,529,531,533,535,537,539,542,544,546,548,550,553,555,557,559,561,564,566,569,571,573,576,578,580,582,585,588,590,592,594,596,599,601,603,606,608,610,612],{"class":72,"line":73},[70,530,77],{"class":76},[70,532,433],{"class":80},[70,534,460],{"class":146},[70,536,150],{"class":76},[70,538,153],{"class":76},[70,540,541],{"class":156},"https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fembed?pb=!1m18!1m12!1m3!1d1589980.4936041927!2d-79.46503024375001!3d38.89126619999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b798ecb5b2c7%3A0xc7edf0c4a86f75af!2sSmithsonian%20National%20Museum%20of%20Natural%20History!5e0!3m2!1sen!2sar!4v1719328865609!5m2!1sen!2sar",[70,543,153],{"class":76},[70,545,436],{"class":146},[70,547,150],{"class":76},[70,549,153],{"class":76},[70,551,552],{"class":156},"600",[70,554,153],{"class":76},[70,556,448],{"class":146},[70,558,150],{"class":76},[70,560,153],{"class":76},[70,562,563],{"class":156},"450",[70,565,153],{"class":76},[70,567,568],{"class":146}," style",[70,570,150],{"class":76},[70,572,153],{"class":76},[70,574,575],{"class":156},"border:0;",[70,577,153],{"class":76},[70,579,508],{"class":146},[70,581,150],{"class":76},[70,583,584],{"class":76},"\"\"",[70,586,587],{"class":146}," loading",[70,589,150],{"class":76},[70,591,153],{"class":76},[70,593,29],{"class":156},[70,595,153],{"class":76},[70,597,598],{"class":146}," referrerpolicy",[70,600,150],{"class":76},[70,602,153],{"class":76},[70,604,605],{"class":156},"no-referrer-when-downgrade",[70,607,153],{"class":76},[70,609,166],{"class":76},[70,611,433],{"class":80},[70,613,171],{"class":76},[81,615,616],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":65,"searchDepth":618,"depth":618,"links":619},3,[620,622,623,624,625,626,627],{"id":51,"depth":621,"text":52},4,{"id":184,"depth":621,"text":185},{"id":234,"depth":621,"text":235},{"id":284,"depth":621,"text":285},{"id":330,"depth":621,"text":331},{"id":417,"depth":621,"text":418},{"id":517,"depth":621,"text":518},"Create, Track & Manage","Use HTML to add dividers, call-to-actions and more to your digital link","md",{},true,"\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page",{"title":5,"description":629},"\u002Fhelp-center\u002Fhow-to-use-html-to-customize-a-landing-page\u002F","help-center\u002Fhow-to-use-html-to-customize-a-landing-page","oXe0RlkVaLER6XBsFYYDc2TGKYTNZLIn7ZVtfmZ9Ues",[],1785349689346]