Website screenshot

  • 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.

      Website1.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.
      website2.png

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

      website3.png
    6. Gå till https://content.playipp.com/test/login/ i inkognito läge.
      website4.png
    7. Högerklicka på användarnamn fältet och klicka på "Inspektera" alternativet längst ner.
      webiste6.png
      Detta 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.
      webiste7.png
    8. Högerklicka på den markerade raden i inspektor fönstret och gå sedan till Kopiera -> Kopiera Selector.

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

      Script körs efter inloggning, när sidan du vill visa är laddad.
      De olika alternativen som kan läggas till är:
      - Klick
      - Dropdown
      - Skriv
      - Skrivskyddad (lösenord etc)
      - Vänta
      - Enter / Return
      - Gå till URL
      - Injicera CSS

      website11.png
      För mer detaljerad information av dessa steg, gå längst ner i denna guide.
    12. 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.webiste12.png
    13. 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".

      Screenshot 2023-01-27 at 09.46.59.png
      webiste14.png
    14. Välj den skärmdump som ni vill visa.
      Website111.png
      Efter några sekunder så kommer bilden som har tagits laddas in och visas.
      webiste15.png
    15. Ni kan använda settings av X, Y position och Zoom för att beskära och ändra hur bilden ska visas. website16.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.


    Website222.png

    webiste17.png

    Skriptalternativ:

    Skript kan användas helt på egen hand för att skapa ett mer specifikt flöde av steg. Du kan också ställa in automatisk inloggning helt med skript istället för att använda alternativet "Kräver inloggning".
     

    - Klick
    Simulerar ett klick på en specifik del av webbplatsen. Till exempel. klicka på inloggningsknappen, en länk på sidan eller "Acceptera cookies"-knappen på popup-fönster som alltid kommer upp när du går in på en webbplats och så vidare.

    Det krävs en CSS-väljare för att veta var du ska klicka. Se steg 7 -> 9 i guiden ovan för att se hur du får en CSS-väljare.

    - Drop down
    Väljer ett alternativ från en rullgardinsmeny. Till exempel rullgardinsmenyer för att välja månader, år.

    Värdefältet är värdet på rullgardinsmenyn du vill att det ska välja, medan väljaren är CSS-väljaren för rullgardinsmenyn.

    - Skriv
    Skriver text för en specifik del av webbplatsen. Till exempel. ange användarnamn i ett inloggningsformulär eller skriv in text för att söka i Googles sökfält.

    Värdefältet är texten som ska skrivas, medan väljaren är CSS-väljaren för den del av webbplatsen där den ska skrivas.

    - Skriv (skyddad)
    Skriver in känslig text till en specifik del av webbplatsen. Till exempel. ange ett lösenord i ett inloggningsformulär.

    Value är den känsliga texten som ska skrivas, selector är CSS-väljaren för den del av webbplatsen där den ska skrivas.

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

    Värde är antalet sekunder som skriptet måste vänta.

    - Enter/return
    Simulerar Enter-knapptryckning på en specifik del av webbplatsen. Om du t.ex. har skrivit in något i ett sökfält och vill nu trycka på Enter för att utföra sökningen.

    Selector är CSS-väljaren för den del av webbplatsen som skriptet ska trycka på Enter för.

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

    Till exempel. om du tidigare har gjort en inloggning och nu vill gå till en specifik webbplats för att visa något.

    Värdet är webblänken som ska laddas.

    - Injicera CSS
    Om webbplatsen behöver specifik styling för att den ska se bra ut kan skriptet lägga till CSS-styling på webbplatsen innan du tar skärmdumpen.

    Om webbplatsen behöver någon specifik stil kan du injicera CSS-kod för att ändra stilen på webbplatsen innan en skärmdump tas.

    Värde är CSS-koden som ska användas t.ex. "färg: #ffffff; bakgrundsfärg: # 000000;" medan selector är CSS-väljaren för den del av webbplatsen som ska påverkas av CSS-koden.
    Om ingen väljare är vald kommer CSS-koden att gå direkt till body-elementet.


    Om du gör ett misstag eller sätter skriptstegen i fel ordning, kan du ordna om skriptstegen genom att dra och släppa dem till olika positioner i listan.

  • Fick du svar på din fråga?

      

    Lämna feedback