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 efter en timme. Du kan ställa in att olika steg ska göras innan bilden tas; logga in, klicka på knappar, mm. Detta möjliggör att du kan visa upp webbsidor som ligger bakom en inloggning eller liknande.
Du kan se vårt senaste webbinarium om website screenshot här:
OBS: integrationen kan bara visa upp publika webbsidor, är webbsidan bara tillgängligt intern på ert nätverk så kommer det inte att fungera.
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
Gå direkt till:
För att lägga till en integration följer du dessa steg:
- Klicka på integrationer
- Klicka på Website screenshot
- Klicka på Lägg till i PLAYipp
- Klicka på Aktivera koppling.
- Du får nu lägga till en källa. Börja med att ställa in visningsnamnet på källan.
- Skriv in den URL som du vill visa upp
- För att kunna hämta aktuell data kan man behöva ställa in tidszon, Det gör du här.
- 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.
- 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..png)
- Vill du att webbläsaren inte ska identifiera sig med en user-agent så bockar du ur det här.
- Många sidor har samma typ av inloggningsflöde, Du kan läsa mer om hur den fungerar här: Inloggning krävs
- 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
- Klicka på lägg till källa
Fältnamn / Selector
Innan du kan börja med att lägga till automatiskt inloggning eller skript måste du veta hur du tar reda på vad elementen som du interagera med har för namn. För att ta reda på dessa följer du dessa steg:
- Öppna webbläsaren i incognitoläge (vanligaste kortkommandot är ctrl/cmd + shift + n)
- Ö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.
- Högerklicka på det element som du vill ta reda namnet på.
- Välj inspektera
.png)
- 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.
- Välj kopiera > Kopiera selector
- 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.
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. 
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.
När du har din källa färdig så kan du lägga till en widget på skärmen som visar upp detta.
- Klicka här
- Klicka "Publicera"
- Klicka på den plats eller grupp du vill publicera till
- Klicka den yta du vill publicera till
- Klicka "Lägg till"
- Klicka på "Automatiskt innehåll"
- Klicka på Lägg till website screenshot
- Klicka på den källa du vill visa upp
- Här kan du justera position och zoom.
- Klicka på lägg till i spellista
- Ge din widget ett namn
- Klicka på Välj Mapp
- Klicka på den mapp du vill spara widgeten i
- Klicka på välj mapp
- Klicka på spara
- Nu är din widget publicerat på skärmen och den kommer snart att dyka upp på skärmen.