Widgetguiden Vad är Publits widgetshop?

Transkript

1 Widgetguiden Den här guiden är till för dig som vill använda Publits widgetshop för att enkelt sälja böcker direkt på din egen hemsida, blog eller Facebook. Här går vi steg för steg igenom processen för att skapa en widgetshop och tipsar om hur man kommer runt några vanliga hinder. Vad är Publits widgetshop? Rent tekniskt består widgetshoppen av en kort kodsträng som du klistrar in i ett HTML-dokument på din hemsida. När någon besöker hemsidan anropar kodsträngen Publit och själva widgeten (nätbokhandeln) genereras. Resultatet blir att du har en fullt fungerande nätbokhandel inbäddad på din hemsida. Varje widgetshop kan bäddas in på hur många hemsidor som helst. Du kan dessutom skapa olika widgetshoppar och exakt bestämma vilka böcker som ska säljas i varje. En shop kan till exempel sälja alla förlagets titlar, en annan alla böcker av en enskild författare, ytterligare en alla böcker i ett speciellt ämne osv. Genom att ge de olika shopparna unika namn kan du dessutom hålla reda på i vilken shop boken har sålts. Köp kan ske både med kontokort (VISA och MasterCard) och mot faktura. Transaktioner sker över en certifierad krypterad koppling till betalningstjänsten DIBS och all administration hanteras av Publit. Tryckta böcker skickas direkt till kunden. Eböcker levereras som en nedladdningslänk via epost. En av finesserna med widgetshoppen är att uppdatering är enkel. Om du ändrar någonting i en widgetshop, eller ändrar priset på en bok så uppdateras shoppen direkt utan att du behöver göra någonting. Även fast du har klistrat in samma widgetshopkod på flera olika hemsidor så uppdateras alla instanser av den.

2 Så funkar det För att kunna sälja en bok i widgetshoppen måste du kryssa i distributionsalternativet widgetshop i katalogvyn, där du också sätter priset. Dina böcker kan ha ett särskilt widgetpris, men inte olika priser i olika widgetshoppar. Sedan går du in under rubriken Widgetshop och skapar en eller flera shoppar. Här har du tillgång till alla titlar som widget-aktiverats i din katalog, och kan ställa in precis vilka av dessa titlar som ska dyka upp i vilken shop. Här nedan följer vi dig genom processen att skapa en widgetshop. Steg1: Namn Om du skapar flera olika widgetshoppar bör du ge dem tydliga namn för att kunna särskilja var försäljningen skett. Detta namn är alltså endast till för att underlätta din egen administration. Tänk på att det kan finnas anledning att skapa två shoppar även om du säljer samma titlar i båda. På så sätt kan du exempelvis jämföra försäljning i shoppen på förlagets hemsida med försäljning i shoppen på förlagets Facebook-sida.

3 Steg 2: Design Du kan bestämma utseendet på din shop. En shop som ska bäddas in i en bloggpost kanske gör sig bäst med alla rutor urkryssade (då visas pris och titel först när muspekaren förs över omslagsbilden) medan en hop som ska visa många titlar troligtvis behöver ett sökfält. Steg 3: Layout Antalet titlar som visas i widgetshoppen anpassas automatiskt beroende på hur mycket plats som finns tillgängligt där koden klistras in. Om alla titlar inte får plats, läggs paginering till automatiskt så att besökaren kan bläddra sig fram. Här kan du med hjälp av ett antal snabbval generera inte bara widgetkoden, utan även en HTMLcontainer som är optimalt anpassad för det antal titlar du vill visa upp per sida. Storleken på omslagsbilderna i shoppen är lika stora oavsett vald layout. Du kan använda rullistorna eller något av förvalen. Det går också bra att själv ändra bredd och höjd direkt i det element du lagt in widgetkoden i på din hemsida. Minsta rekommenderade storlek är

4 150 x 250 pixlar. Observera att om storleken är mindre än 420 pixlar på bredden eller 560 pixlar på höjden, så är det viktigt att shoppen tillåts flöda utanför sin tilldelade yta eftersom olika bankers kontokortsverifieringar (så kallade 3D-secure) tar olika stor plats och behöver denna yta för att rymmas. Att låta shoppen flöda över den tilldelade ytan görs genom att ställa parametern overflow till värdet visible, som i exemplet nedan: Steg 4: Urval Alla titlar innebär att widgetshoppen kommer att innehålla alla böcker som du godkänt för widgetförsäljning i katalogvyn. Om du publicerar en ny bok dyker den automatiskt upp i widgetshoppen. Författare innebär att widgetshoppen innehåller alla böcker av den angivna författaren. Om en ny bok publiceras av författaren dyker den automatiskt upp i widgetshoppen. Du kan lägga till mer än en författare i samma shop. ISBN ger dig möjligheten att exakt bestämma vilka böcker som ska säljas i shoppen. Taggar Genom att tagga dina böcker i katalogvyn kan de organiseras i grupper efter ämne eller liknande i widgetshoppen. Om en ny bok publiceras med samma tagg så dyker den automatiskt upp i shoppen.

5 Steg 5: Appdesign inställningar för mobil version av shoppen Användare som besöker din widgetshop från en smartphone tillfrågas om de vill slussas vidare till en mobilanpassad version och därefter om de vill spara ett bokmärke till shoppen på sin hemskärm. Mobilversionen av shoppen fungerar som en app. Du kan ladda upp din egen ikon samt startbild (splash screen) som visas medan själva shoppen laddas. Här kan du även ge shoppen ett namn, som visas på användarens hemskärm om shoppen bokmärkts. Detta namn kan vara ett annat än widgetshoppens namn. Bilderna du laddar upp för ikon-grafik och splash screen ska vara formaterade som png-filer och ha dimensionerna pixlar respektive pixlar. Om ikonen visas på en iphone och har en transparent bakgrund kommer denna yta automatiskt bli svart och få rundade hörn samt en skugga och en reflektion i nederkant.

6 Steg 6: Skapa shop / spara ändringar När du klickar på skapa shop läggs den nya widgetshoppen till i listan i vänstermenyn. När en widgetshop är vald så kan du se koden och även ändra alla inställningar. Om du ändrar något i en redan existerande shop genomförs dina uppdateringar först när du klickar spara ändringar. Steg 7: Länka till shoppen Förutom widgetkoden skapas tre olika direktlänkar till widgetshoppen en vanlig URL, en mobilanpassad och en med https-prefix (se mer nedan). Länkarna hittar du under fönstret med koden. Att direktlänka är ett enkelt och snabbt sätt att göra widgetshoppen tillgänglig utanför din hemsida. Exempelvis går det att klistra in länken till mobilshoppen direkt i ett sms. För att integrera shoppen på Facebook är enda sättet att länka till https-versionen av den shop som hostas av Publit, eftersom Facebook kräver detta säkra protokoll. Ett enkelt sätt att integrera shoppen på din hemsida eller blogg kan också vara att direktlänka via så kallad iframe (se mer nedan).

7 Steg 8: Bädda in shoppen Bästa sättet att få shoppen att smälta in på din sida är att bädda in widgetkoden. För att kunna göra det behöver du ha möjlighet att redigera innehållet på din hemsida, antingen via ett CMS (Content Management System), eller genom att ändra direkt i html-koden (widgetkoden bör bäddas in i ett block-nivå-element, förslagsvis i en div). Det går bra att ha flera shoppar på samma webbplats, men endast en per html-sida. För att bädda in shoppen på en WordPress-driven sida krävs lokal installation, eftersom sidor hostade på wordpress.com ej tillåter inbäddad JavaScript. Även med en lokal installation kan WordPress dock bråka genom att automatiskt lägga till ett så kallat CDATA-element i widgetkoden vilket hindrar shoppen från att laddas. För att bädda in widgetshoppen på en WordPress-driven hemsida bör du se till att editorn står i HTML-läge (i stället för Visuellt läge). Spara och uppdatera sidan efter att ha klistrat in widgetkoden och kontrollera sedan att inga tecken lagts till utöver den kod du klistrade in. I många fall kan det då se ut som i koden nedan: Testa att ta bort de rödmarkerade delarna och spara om, nu bör shoppen fungera. Ifall sidan där widgetkoden klistras in innehåller väldigt många tillägg kan shoppens funktionalitet

8 störas av konflikter som uppstår mellan widgetshoppens JavaScript och olika andra JavaScript-filer som läses in. Då kan länkning via iframe vara ett alternativ. Tänk på att storleken på en inbäddad shop inte kan uppdateras automatiskt från ditt Publit-konto, eftersom shoppen begränsas av utrymmet på det kringslutande html-elementet. Om du vill visa fler eller färre titlar åt gången i en shop som är inbäddad, måste du därför ändra bredd och höjd på den div där widgetkoden ligger. Länka shoppen via iframe Om du upplever problem med att bädda in widgetkoden kan du prova att länka till den shop som hostas av Publit med hjälp av iframe. En iframe fungerar som ett fönster till en separat hemsida, en annan hemsidas innehåll syns inom denna ram. Exempelkod till höger. Tänk på att innehåll från sidan som läses in inte kan flöda utanför ramen på en iframe. För att alla former av korttransaktion ska kunna genomföras måste iframe-rutan därför vara minst 420 pixlar bred och minst på 600 pixlar hög.