Website screenshot

Med den här smarta integrationen kan du enkelt visa en webbsida på din informationsskärm. Integrationen tar en skärmdump på den sidan du vill visa och uppdaterar sedan den skärmdumpen med jämna mellanrum. Denna artikel innehåller allt du behöver veta om Website screenshot.

Innehållsförteckning:

• Vad är website screenshots?
• Lägg till integration
• Fältnamn / Selector
• Automatisk inloggning
• Script
• Lägg till widget

Vad är website screenshots?

Funktionen Website Screenshots låter er automatiskt visa upp aktuella skärmdumpar från valfria webbsidor direkt på era informationsskärmar. Systemet hämtar och uppdaterar bilderna med jämna mellanrum, vilket gör det enkelt att visa exempelvis nyhetssidor, intranätsportaler, dashboards eller annan viktig webb-baserad information – utan manuell hantering.

I den kostnadsfria versionen uppdateras skärmbilderna en gång i timmen, vilket passar för innehåll som inte förändras alltför ofta. För mer dynamiska behov finns en premiumversion där uppdateringsintervallet är var 5:e minut, vilket ger en nästan realtidsliknande återgivning av webbsidan. Vill ni uppgradera till premium eller har frågor kring funktionen? Tveka inte att kontakta oss – vi hjälper er gärna att hitta den lösning som passar bäst för era behov.

Med Website Screenshots-funktionen kan du konfigurera olika automatiserade steg som ska genomföras innan själva skärmbilden tas. Det innebär att systemet kan logga in på en webbplats, klicka på knappar, fylla i formulär eller navigera vidare till en specifik vy – precis som en användare skulle göra. Detta gör det möjligt att visa upp innehåll som normalt sett kräver inloggning eller annan form av interaktion, exempelvis interna dashboards, statistikverktyg eller personalportaler. Funktionen ger därmed större flexibilitet och utökade möjligheter att integrera era viktigaste digitala verktyg och system direkt i er skärmlösning

Vill du se ett webinar som handlar om just Website screenshot? Klicka här! 

Om ni ska visa upp en webbsida som den är, försök först med att publicera den som en vanlig webblänk först. Du kan läsa hur du publicerar en webblänk här: Publicera webblänkar, Youtube & HLS streams 

Lägg till integration

För att lägga till en integration följer du dessa steg: 

1. Klicka på integrationer
   
   
   
2. Klicka på Website screenshot
   
   
   
3. Klicka på Lägg till i PLAYipp
   
   
   
4. Klicka på Aktivera koppling.
   
   
   
5. Du får nu lägga till en källa. Börja med att ställa in visningsnamnet på källan. 
   
   
   
6. Skriv in den URL som du vill visa upp
   
   
   
7. För att kunna hämta aktuell data kan man behöva ställa in tidszon, Det gör du här.
    
   
   
8. Här kan du välja vilken webbläsare som ska användas för att ta bilden. Fungerar inte allt som det ska kan det vara bra att höja till en högre version. 
   
   
   
9. Behöver du ändra upplösning på webbläsaren som tar bilden gör du det här. Det kan vara bra att göra om man ska visa widgeten på en mindre yta och man vill att webbsidan ska anpassa sig mot den storleken.
   Ibland behöver man även höja dessa värden om man behöver scrolla på webbsidan för att se det man vill visa upp. 
   
   
   
10. Vill du att webbläsaren inte ska identifiera sig med en user-agent så bockar du ur det här.
    
    
    
11. Många sidor har samma typ av inloggningsflöde, Du kan läsa mer om hur den fungerar här: Inloggning krävs
    
    
    
12. Bockar du i detta val får du lägga till skript som körs i webbläsaren innan spelaren tar en bild. Du kan läsa mer om det lite längre ner i guiden
    
    
    
13. Klicka på lägg till källa
    

Fältnamn / Selector
Innan du kan börja konfigurera automatiserad inloggning eller andra interaktioner via skript behöver du först ta reda på vilka element på webbsidan som du ska interagera med – till exempel inmatningsfält, knappar eller menyer. Varje element på en webbsida har ett specifikt namn eller en identifierare (såsom name, id, eller class), och det är dessa som du behöver för att kunna styra ditt script korrekt.

Följ stegen nedan för att identifiera dessa element i din webbläsare:

1. Öppna webbläsaren i incognitoläge (vanligaste kortkommandot är ctrl/cmd + shift + n)
   
   
2. Öppna länken som du vill visa upp i detta nya fönster. I guiden nedan så använder vi https://content.playipp.com/test/login/ men alla webbsidor är byggda olika så du kommer få ut olika namn.
   
   
3. Högerklicka på det element som du vill ta reda namnet på.
   
   
   
4. Välj inspektera
   
   
   
5. Ett fönster kommer att dyka upp med all HTML kod för hemsidan. En rad kommer vara markerad. När du håller muspekaren på denna rad kommer du se att fältet som du högerklickat på kommer att bli markerat. 
   Högerklicka på denna rad.
   
   
   
6. Välj kopiera > Kopiera selector
   
   
   
7. Nu har du en bit text i din urklipp. Detta kan du klistra in fältnamn/selector i diverse skript för att bestämma vilket element som ska interageras med.
   
   OBS: Alla sidor är byggda olika så namnen är olika för varje sida.

Inloggning krävs

Med knappen inloggning krävs kan du enkelt skapa ett script som skriver in ett användarnamn, lösenord och sedan klickar på logga in. Måste du skriva användarnamn > klicka nästa > skriva lösenord > klicka logga in  eller liknande måste du använda skriptning alternativet för att göra varje steg för sig.

När du fyllt i allt kan det se ut något liknade detta:
OBS: Alla sidor är byggda olika så namnen på selectorn är olika ut för olika sidor. 

Skriptning

Med skript kan du sätta upp ett antal steg som ska ske innan en skärmdump tas på sidan. Det kan vara att logga in, gå in på en undersida, godkänna kakor eller liknade. 

TIPS: Det är smidigast att öppna ett inkognitofönster samtidigt som du tar reda på vilka steg som tas. Använder du din vanliga profil i webbläsaren så kan du ha accepterat kakor, loggat in eller liknande redan.

I exemplet nedan så klickas det på en knapp som heter "#wt-cli-accept-btn" sedan vänta i 5 sekunder innan bilden tas.

Om du gör ett misstag eller sätter stegen i fel ordning, kan du byta ordning på stegen genom att dra i handtagen (de 3 strecken på vänstersidan) och dra dom rätt.

Dom alternativ som finns är följande: 

• Klicka
  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.
  
  
  
• Dropdown meny
  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, för att se hur du hittar namnet på fältet se delen om fältnamn / selector
  
  
  
  
• Skriv
  Skriver text för en specifik del på webbplatsen. Till exempel. Ange användarnamn i ett inloggningsformulär eller skriv in text för att söka i ett sökfält.
  Värde är texten som ska skrivas, för att se hur du hittar namnet på fältet se delen om fältnamn / selector 
  
  
  
• Skriv (skyddad)
  Skriver in känslig text till en specifik del av webbplatsen. Till exempel. Ange ett lösenord i ett inloggningsformulär.
  Värde är den texten som ska skrivas, för att se hur du hittar namnet på fältet se delen om fältnamn / selector 
  
  
• Vänta
  Vänta i X antal sekunder innan scriptet går vidare till nästa steg. Till exempel om du i föregående steg har klickat på en knapp och nu vill vänta några sekunder på att hemsidan ska laddas ordentligt.
  Värde är antalet sekunder som skriptet ska vänta.
  
  
  
• Enter/Return
  Simulerar Enter-knapptryckning på en specifik del av webbplatsen. Till exempel om du i tidigare steg har skrivit in något i ett sökfält och vill nu trycka på Enter för att söka. För att se hur du hittar namnet på fältet se delen om fältnamn / selector 
  
  
  
• Gå till URL
  Laddar en ny webblänk för att fortsätta skriptet på.
  Till exempel om du i tidigare steg har loggat in på en tjänst nu vill gå till en specifik del av tjänsten.
  Värdet är webblänken som skriptet ska gå till.
  
  
  
• Lägg till CSS
  Vill du dölja en del av webbsidan eller ändra CSS kan du använda lägg till CSS.
  Värde är CSS-koden som ska köras t.ex. "färg: #ffffff; bakgrundsfärg: # 000000;". För att se hur du hittar namnet på fältet se delen om fältnamn / selector 
  Om ingen väljare är vald kommer CSS-koden att gå direkt till body-elementet.
  
  
  

Lägg till widget

När du har din källa färdig så kan du lägga till en widget på skärmen som visar upp detta.

1. Klicka här
   
   
   
2. Klicka "Publicera"
   
   
   
3. Klicka på den plats eller grupp du vill publicera till
   
   
   
4. Klicka den yta du vill publicera till
   
   
   
5. Klicka "Lägg till"
   
   
   
6. Klicka på "Automatiskt innehåll"
   
   
   
7. Klicka på Lägg till website screenshot
   
   
   
8. Klicka på den källa du vill visa upp
   
   
   
9. Här kan du justera position och zoom.
   
   
   
10. Klicka på lägg till i spellista
    
    
    
11. Ge din widget ett namn
    
    
    
12. Klicka på Välj Mapp
    
    
    
13. Klicka på den mapp du vill spara widgeten i
    
    
    
14. Klicka på välj mapp
    
    
    
15. Klicka på spara
    
    
    
16. Nu är din widget publicerat på skärmen och den kommer snart att dyka upp på skärmen.