{"id":12963,"date":"2023-03-30T08:46:37","date_gmt":"2023-03-30T08:46:37","guid":{"rendered":"https:\/\/www.foodfriends.com\/blog\/?p=12963"},"modified":"2023-03-31T08:26:50","modified_gmt":"2023-03-31T08:26:50","slug":"implementera-widget-pa-hemsida-squarespace","status":"publish","type":"post","link":"https:\/\/old.foodfriends.com\/blog\/implementera-widget-pa-hemsida-squarespace\/","title":{"rendered":"Implementera widget p\u00e5 hemsida – Squarespace"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Installationsguide – Squarespace<\/h2>\n

Om du driver din webbplats on Squarespace,v\u00e4nligen f\u00f6lj stegen nedan f\u00f6r att l\u00e4gga till knappwidgeten p\u00e5 dina sidor:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Logga in p\u00e5 Squarespace-konto. Klicka p\u00e5 hemsidan som du vill l\u00e4gga till knappen p\u00e5. P\u00e5 navigeringsmenyn, klicka “p\u00e5”<\/p>

Inst\u00e4llningar> Avancerad> Kodinjektion<\/p>

med samma ordning.<\/p>

Klicka p\u00e5 f\u00f6ljande kodavsnitt f\u00f6r att kopiera det till urklipp:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

<script type=”text\/javascript” src=”https:\/\/www.bokabord.se\/widget.min.js”><\/script><\/i>
<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

P\u00e5 Squarespaces kodredigerare till v\u00e4nster, inuti Header<\/b>, h\u00f6gerklicka p\u00e5 den sista tomma raden l\u00e4ngst ner<\/b> och klicka p\u00e5 Klistra in<\/b>\u00a0<\/p>

(v\u00e4nligen ignorera de andra kodraderna i exemplet p\u00e5 sk\u00e4rmdumpen).<\/i><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Slutresultatet m\u00e5ste se ut som nedan\u00a0<\/p>

(v\u00e4nligen ignorera de andra kodraderna i exemplet p\u00e5 sk\u00e4rmdumpen):<\/i><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Klicka p\u00e5 Avancerat > Inst\u00e4llningar<\/b> \u00f6verst i den v\u00e4nstra rutan med samma ordning f\u00f6r att g\u00e5 tillbaka till instrumentpanelen Inst\u00e4llningar igen.<\/p>

Anv\u00e4nd v\u00e5rt knappgeneratorverktyg <\/b>nedan f\u00f6r att f\u00e5 bokningsknappstilen kompatibel med din webbplats tema, f\u00e4rger och typsnitt. Vi har placerat verktygstips f\u00f6r varje inst\u00e4llning f\u00f6r att v\u00e4gleda dig, f\u00f6r bara musen \u00f6ver infoikonerna f\u00f6r att se deras beskrivningar. \u00c4ndringarna kommer att \u00e5terspeglas p\u00e5 knappen i Button Preview<\/b>-omr\u00e5det tillsammans med kodblockets <\/b>inneh\u00e5ll.<\/p>

\u00a0<\/p>

En viktig inst\u00e4llning \u00e4r Button Type<\/b>, som avg\u00f6r hur knappen kommer att visas p\u00e5 din webbplats:<\/p>

Floating\u00a0<\/b>: Knappen kommer att visas antingen i ett h\u00f6rn eller en kant av din webbplats, beroende p\u00e5 ditt val. Den kommer allts\u00e5 att visas p\u00e5 en fast plats p\u00e5 din sida.<\/p>

Standard <\/b>: Knappen kommer att visas som ett block d\u00e4r du placerar den p\u00e5 sidan. Du kan v\u00e4lja den horisontella justeringen av knappen inuti dess block.<\/p>

N\u00e4r du har konfigurerat din knapps stil klickar du p\u00e5 l\u00e4nken Kopiera kodblock<\/b> under rutan Kodblock<\/b> till h\u00f6ger.<\/p>

\u00a0<\/p>

P\u00e5 Squarespace-instrumentpanelen, navigera till sidan du vill l\u00e4gga till knappen. Flytta musen \u00f6ver sidan och klicka p\u00e5 Redigera<\/b> i den \u00f6vre menyn till v\u00e4nster.<\/p>

Om du vill visa knappen i flytande<\/b> l\u00e4ge, scrolla ner till botten av sidan och klicka p\u00e5 plus-knappen ovanf\u00f6r sidfoten f\u00f6r att l\u00e4gga till knappelementet.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Inuti s\u00f6krutan i modalf\u00f6nstret L\u00e4gg till element skriver du html <\/b>och klickar sedan p\u00e5 kodblockelementet<\/b>:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Ta bort exempelkoden “Hello World” i kodredigeraren, h\u00f6gerklicka och klicka sedan p\u00e5 Klistra in<\/b>. Slutresultatet m\u00e5ste se ut som nedan:<\/p>

(v\u00e4rdena f\u00f6r knappinst\u00e4llningarna kan vara annorlunda, v\u00e4nligen avvisa dem)<\/i><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Klicka p\u00e5 Verkst\u00e4ll <\/b>och spara sidan.<\/p>

Om du vill att knappen ska visas p\u00e5 en viss plats p\u00e5 din sida ist\u00e4llet f\u00f6r i h\u00f6rn eller kanter, v\u00e4ljer du Standard <\/b>knappinst\u00e4llning i knappgeneratorverktyget och l\u00e4gger till den som ett kodblock med samma metod.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Knappgenerator-verktyg<\/h3>

V\u00e5ran knappgenerator kan man hitta bland sin i WaiterAid under\u00a0<\/p>

Inst\u00e4llningar>\u00d6vrigt>L\u00e4gg till bokning p\u00e5 din hemsida>Integrera p\u00e5 din sida>Squarespace<\/a><\/b><\/p>

eller genom att klicka p\u00e5 texten ovan.<\/p>

D\u00e4r kan du hitta verktyget som vi refererat till i den h\u00e4r guiden f\u00f6r att skapa en knapp som passar just er hemsida och till\u00e5ter era g\u00e4ster att boka ett bord p\u00e5 eran restaurang.\u00a0<\/p>

OBS: man kommer beh\u00f6va ett giltigt WaiterAid login f\u00f6r att f\u00e5 \u00e5tkomst till verktyget.<\/i><\/p>

Nedan hittar ni en knapp skapad av verktyget med standardinst\u00e4llningarna och typen Standard.<\/b>\u00a0S\u00e5 v\u00e4l som en sk\u00e4rmdump av hur verktyget ser ut.<\/p>

\u00a0<\/p>

\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Knapp exempel:<\/u><\/b><\/h4>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t