2022.2

Step1:Gettingtheappropriatelink
Torequestcontentfromanotherserver,youwillneedalink.
Somewebsitesgivetheoptiontoembedtheircontentinyourwebsitebyprovidingalinkorthecom-
pleteHTML.Youtube.com,forexample,offersnotonlyalinktoshareacertainvideo,butalsothefull
HTMLtoembedthatvideoinyourwebsite.
Ifthatoptionisnotavailable,youwillhavetobuildthelinkyourself.Findtheserver'sAPIandlook
throughittogettheexactendpointandparametersthatyouneed.
WithmanyserversitisrequiredtouseanAPI keyinthelink;thiskeygenerallycomesforfreeafteryou
signuptotheirwebsite.Thekeywillbepartofthelinkthatisusedtomakearequesttotheserver.
Note: Payattentiontotheservice'sTermsofService.Manyservershavelimitationsonthenum-
berofcallsthatcanbemadetothemforfree.Beyondtheselimits,theircontentwillnotshowup
inyourtemplateunlessyoupurchaseabusinessplan.
Step2:Preparingthetemplate
Thenextstepistosetupatemplate.Ifyou'vegottheHTMLtoembedcontentinyourtemplateyoucan
pastethatHTMLontheSourcetab(andskipStep3).
Otherwiseyourtemplatehastocontainanelementthatcanbereplacedorfollowedbytheremotecon-
tent:anemptyparagraph,forexample,oraheading.Iftheelementisn'tuniqueinthetemplate,give
theelementanID.
Notethatinteractivecontent,suchasaninteractivemap,canonlybeusedinWebtemplates,andcan-
notbeoutputonPrintorEmailcontexts(eventhoughtheywillshowupinPreviewmode!).
Step3:Writingascript
Thefinalstepistowriteascriptthatretrievesthecontentandinsertsitintothetemplate(see"Writing
yourownscripts"onpage368).UsetheelementortheIDoftheelementthatyouaddedinStep2as
thescript'sselector.Forinformationaboutselectors,see"SelectorsinOLConnect"onpage385.
Tip: Selectanelement,thenclickon'ID'intheAttributespane,tocreateascriptthathasthatele-
ment'sIDasselector.
Retrieving content
Dependingonthetypeofcontentthattheremoteserverreturns-HTMLorJSON-youcanuseload-
html(location)orloadjson(location)(seealso:"loadhtml()"onpage726and"loadjson()"on
page729)toretrievethecontent.ThelinkthatyouselectedinStep1shouldbepassedtothefunction
asastring.Forexample:
loadjson('https://blog.mozilla.org/wp-json/wp/v2/posts?per_page=5');
Page 393