Visa en webbplats på din digitala informationsskärm.

Med den här smarta integrationen kan du enkelt visa en webbplats på din digitala informationsskärm från PLAYipp. Integrationen tar en skärmdump på den sidan du vill visa och uppdaterar sedan den skärmdumpen med jämna mellanrum. Integrationen låter dig till och med visa sidor som ligger innanför inloggningsväggarna. Till exempel om du vill visa upp ditt intranät på din digitala informationsskärm.

Hur fungerar det? 

Website Screenshot är en funktion som laddar in en hemsida på våra servrar och går stegvis igenom hemsidan likadant som en vanlig användare innan den tar en skärmdump av hemsidan. 

Med ca 60 minuters mellanrum uppdateras denna skärmdump och byter ut den tidigare skärmdumpen. Vi lagrar inga skärmdumpar. 

Funktionen kan alltså själv ladda in en hemsida, till exempel https://example.com/login, och kan skriva in användarnamn och lösenord i inloggningsformuläret och sedan klicka på login knappen.

Sedan väntar funktionen tills hemsidan har skickat oss vidare till landningssidan efter inloggning, innan funktionen tar en skärmdump av hur hemsidan ser ut.

Tänk på!

Om ni ska endast publicera en hemsida och visa upp den som den är, försök först med att publicera den som en vanlig webblänk. Här hittar du en guide till hur man gör det.

Om hemsidan kan visas upp utan att behöva: 

- Logga in

- Undvika iFrames / CORS 

- Beskära hemsidan för att visa en specifik del av den 

så bör hemsidan publiceras som en vanlig webblänk istället. 

 

Se en kortfilm om hur du snabbt kommer igång! 

Vill du ha en mer genomgående guide? Scrolla ned och följ stegen! 



Let's go! 

      1. Vilken hemsida vill vi visa? För denna guide så använder vi https://content.playipp.com/test/login/ och vi vill visa upp det som är bakom inloggningsformuläret.
      2. Skriv in webblänken in i "URL att visa" fältet, sedan alternativt så kan ni även skriva in storleken av den skärmdump som ska tas. Om ni vet vilken hur stor ytan som ni kommer publicera till är, kan ni ange de måtten här.

        pasted_image_0.png
      3. Klicka på "Kräver inloggning"

      4. Skriv in användarnamn och lösenord i deras fält.

        Om webblänken som ska visas tar en till ett inloggningsformulär så behöver du inte skriva in någon webblänk alls i "URL för inloggning".

        Om inloggningsformuläret och sidan som ska visas är på 2 olika länkar så behöver ni skriva in länken för inloggning.
        pasted_image_0__1_.png

      5. Öppna Google Chrome och sedan öppna ett inkognito fönster.

        pasted_image_0__2_.png
      6. Gå till https://content.playipp.com/test/login/ i inkognito läge.
        pasted_image_0__3_.png
      7. Högerklicka på användarnamn fältet och klicka på "Inspektera" alternativet längst ner.pasted_image_0__4_.pngDetta kommer att öppna utvecklingsverktygen av Chrome och visa upp HTML koden av hemsidan. Det kommer där finnas en rad som är markerad, det är den raden som vi är intresserad av i detta fall.pasted_image__5_.png
    1. Högerklicka på den markerade raden i inspektor fönstret och gå sedan till Kopiera -> Kopiera Selector.

      pasted_image_0__6_.png
    2. Klistra in (CTRL + V) Selector in i fältet för användarnamn selector fältet.
      pasted_image_0__7_.png
    3. Repetera stegen 7 -> 9 men denna gång med fältet för lösenord och för skicka/log in- knappen.
      pasted_image_0__8_.png
    4. Om det finns några extra steg som behöver göras så kan ni lägga till dessa med "Scripting".

      Scripting steg görs efter inloggning, när den sida som ni vill visa är inladdad.
      De olika scripting steg som kan läggas till är:
      - Klicka
      - Skriv
      - Skriv Skyddat (Lösenord etc)
      - Vänta
      - Enter/Return
      - Gå till URL
      - Lägg till CSS
      pasted_image_0__9_.png
      För mer detaljerad information av dessa steg, gå längst ner i denna guide.
    5. När alla steg och inställningar är korrekta, klicka på "Lägg till".

      Vi rekommenderar att ni går igenom varje steg manuellt i en inkognitofönster i Google Chrome för att säkerställa att det kommer att fungera korrekt.pasted_image_0__10_.png
    6. För att publicera er website screenshot till er digitala informationsskärm så välj lägg till widget i publicera. Rätt widget för website screenshot hittar ni under "övrigt".

      pasted_image_0__11_.png
      pasted_image_0__12_.png
    7. Välj den skärmdump som ni vill visa.
      pasted_image_0__13_.png
      Efter några sekunder så kommer bilden som har tagits laddas in och visas.
      pasted_image_0__14_.png
    8. Ni kan använda settings av X, Y position och Zoom för att beskära och ändra hur bilden ska visas. pasted_image_0__15_.png

      När du är nöjd med din website screenshot så klickar du på publicera!

 

O.B.S. Om ni vill publicera samma bild till andra ytor som är i andra storlekar så rekommenderar vi att ni publicerar en ny widget som använder samma bild. Inställningarna för varje publicerad widget av denna typ blir anpassat för storleken på den yta ni publicerar till.


pasted_image_0__16_.png

pasted_image_0__17_.png

Scripting alternativ:

Scripting kan användas helt på egen hand för att skapa ett mer specifikt flöde av steg. Ni kan även sätta upp automatisk inloggning helt med scripting istället för att använda "Kräver inloggning" alternativet.

- Klicka
Simulerar en klickning på en specifik del av hemsidan. T.ex. klicka på login knapp, en länk på sidan eller "Acceptera kakor" knapp på popups som alltid kommer upp när man går in på någon hemsida o.s.v.

Den tar en CSS selector för att veta vart den ska klicka. Se steg 7 -> 9 i guiden ovan för att se hur man får fram en CSS selector.

- Skriv
Skriver in text till en specifik del av hemsidan. T.ex. skriva in användarnamn i ett inloggningsformulär eller skriva in text för att söka i google sökfältet.

Värde fältet är texten som ska skrivas, medans selector är CSS selector till den del av hemsidan där det ska skrivas in.

- Skriv (Skyddat)
Skriver in känslig text till en specifik del av hemsidan. T.ex. skriva in lösenord i ett inloggningsformulär.

Värde är den känsliga texten som ska skrivas, selector är den CSS selector för den del av hemsidan där det ska skrivas.

- Vänta
Väntar i x sekunder innan den går vidare till nästa steg i skriptet. T.ex. om du i föregående steg har klickat på en webblänk och nu vill du vänta i några sekunder för att hemsidan ska laddas in ordentligt innan vi går vidare.

Värde är antalet sekunder som skriptet ska vänta.

- Enter Knapp
Simulerar Enter knapp tryckning på en specifik del av hemsidan. Om du t.ex. har skrivit in något i ett sökfält och vill nu trycka på Enter för att genomföra sökningen.

Selector är CSS selector för den del av hemsidan som skriptet ska trycka Enter för.

- Gå till URL
Laddar in en ny webblänk för att fortsätta skriptet på.

T.ex. om du i tidigare steg har genomfört en inloggning och vill nu gå till en specifik hemsida för att visa upp något.

Värdet är den webblänk som ska laddas in.

- Lägg in CSS
Om hemsidan behöver specifik styling för att det ska se bra ut så kan skriptet lägga in CSS styling på hemsidan innan skärmdumpen tas.

If the website needs some specific styling you could inject CSS code to change the styling of the website before a screenshot is taken.

Värde är den CSS kod som ska användas t.ex. "color:#ffffff;background-color:#000000;" medans selector är den CSS selector för den del av hemsidan som ska påverkas av CSS koden.
Om ingen selector är vald så kommer CSS koden att gå direkt på body elementet.

 

 

 

Var denna artikel till hjälp?
3 av 4 tyckte detta var till hjälp

Kommentarer

0 kommentarer

logga in för att lämna en kommentar.