Website screenshot

  • With this clever function you can easily present a website onto your digital information screen from PLAYipp, by using screenshots. The smartness even allows you to show pages that lie behind login-walls. For example if you want to show your intranet.

    How does it work?

    Website Screenshot is a function that loads a website on our servers and steps through the website in the same way as a regular user before taking a screenshot of the website.

    At about 60 minute intervals, this screenshot is updated and replaces the previous screenshot. We do not store screenshots.

    The function can thus load a website, for example https://example.com/login, and can enter the username and password in the login form and then click on the login button.

    Then the function waits until the website has sent us to the landing page after logging in, before the function takes a screenshot of what the website looks like.

    Note!

    If you are only going to publish a website and show it as it is, first try to publish it as a regular web link. Here you will find a guide on how to do it.

    If the website can be displayed without having to:

    - Sign in

    - Avoid iFrames / CORS

    - Crop the website to display a specific part of it

    so the website should be published as a regular web link instead.

     


    Watch a short film on how to get started quickly!

    Do you want a more comprehensive guide? Scroll down and follow the steps!


    Remember to activate english subs to get the right experience! 

    Let's go! 

    1. Which website do we want to show? For this guide, we use https://content.playipp.com/test/login/ and we want to show what is behind the login form.
    2. Enter the web link in the "URL to display" field, then alternatively you can also enter the size of the screenshot to be taken. If you know the size of the area you will publish to, you can enter the measurements here.

      pasted image 0.png
    3. Click on "Requires login"

    4. Enter your username and password in their field.

      If the web link to be displayed takes one to a login form, you do not need to enter any web link at all in the "login URL".

      If the login form and the page to be displayed are on 2 different links, you need to enter the link for login.


      pasted image 0 (1).png

    5. Open Google Chrome and then open an incognito window.

      pasted image 0 (2).png
    6. Go to https://content.playipp.com/test/login/ in incognito mode.
      pasted image 0 (3).png
    7. Right-click on the username field and click on the "Inspect" option at the bottom.
      pasted image 0 (4).png
      This will open the development tools of Chrome and display the HTML code of the website. There will be a line that is marked, that is the line we are interested in in this case.
      pasted image (5).png
    8. Right-click on the selected line in the inspector window and then go to Copy -> Copy Selector.pasted image 0 (6).png
    9. Paste (CTRL + V) Selector into the username selector field.pasted image 0 (7).png
    10. Repeat steps 7 -> 9 but this time with the field for password and for submit / log in button.
      pasted image 0 (8).png
    11. If there are any extra steps that need to be done, you can add these with "Scripting".

      Scripting steps are done after login, when the page you want to view is loaded.
      The different scripting steps that can be added are:
      - Click
      - Write
      - Write Protected (Password etc)
      - Wait
      - Enter / Return
      - Go to URL
      - Add CSS

      pasted image 0 (9).png
      For more detailed information on these steps, go to the bottom of this guide.
    12. When all steps and settings are correct, click "Add".

      We recommend that you go through each step manually in an incognito window in Google Chrome to ensure that it works properly.

      pasted image 0 (10).png
    13. To publish your website screenshot to your digital information screen, select add widget in publish. You will find the correct widget for the website screenshot under "other".

      pasted image 0 (11).png
      pasted image 0 (12).png
    14. Select the screenshot you want to display.
      pasted image 0 (13).png
      After a few seconds, the captured image will be loaded and displayed.pasted image 0 (14).png
    15. You can use settings of X, Y position and Zoom to crop and change how the image is displayed. pasted image 0 (15).png

      When you are happy with your website screenshot, click on publish!

    NOTE! If you want to publish the same image to other surfaces that are in other sizes, we recommend that you publish a new widget that uses the same image. The settings for each published widget of this type are adjusted for the size of the area you publish to.


    pasted image 0 (16).png

    pasted image 0 (17).png

    Scripting alternative:

    Scripting can be used entirely on its own to create a more specific flow of steps. You can also set up automatic login completely with scripting instead of using the "Requires login" option.

     

    - Click
    Simulates a click on a specific part of the website. For example. click on login button, a link on the page or "Accept cookies" button on popups that always come up when you go to a website and so on.

    It takes a CSS selector to know where to click. See steps 7 -> 9 in the guide above to see how to get a CSS selector.


    - Write
    Writes text for a specific part of the website. For example. enter username in a login form or enter text to search in the google search field.

    The value field is the text to be typed, while the selector is the CSS selector for the part of the website where it is to be typed.

    - Write (Protected)
    Enters sensitive text to a specific part of the website. For example. enter a password in a login form.

    Value is the sensitive text to be written, selector is the CSS selector for the part of the website where it is to be written.

    - Wait
    Wait for x seconds before proceeding to the next step in the script. For example. if in the previous step you have clicked on a web link and now you want to wait for a few seconds for the website to load properly before we move on.

    Value is the number of seconds the script must wait.

    - Enter Button
    Simulates Enter key pressing on a specific part of the website. If you e.g. has entered something in a search field and now wants to press Enter to perform the search.

    Selector is the CSS selector for the part of the website for which the script is to press Enter.

    - Go to URL
    Loading a new web link to continue the script on.

    For example. if you have previously performed a login and now want to go to a specific website to show something.

    The value is the web link to be loaded.


    - Enter CSS
    If the website needs specific styling for it to look good, the script can add CSS styling to the website before taking the screenshot.

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


    Value is the CSS code to be used e.g. "color: #ffffff; background-color: # 000000;" while selector is the CSS selector for the part of the website that is to be affected by the CSS code.
    If no selector is selected, the CSS code will go directly to the body element.