Information popup with picture and open website button

Post Reply
User avatar
Posts: 7759
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Information popup with picture and open website button

Post by Hopki » Sun Jul 02, 2017 6:10 pm

This is an information popup that uses both text and pictures and a URL button to open a website.
The Objective was to only go to one area of the software, hotspot viewer mode and add all the requited information to make this work so you can easily add the popups.

This was almost achieved but the request for a button that would open a website meant that you do need to go into the Skin Editor to add the button and set the URL.

The popup is also responsive using the scaling logic block. It has been set so it starts off with a scale of 1.2. Then when the window is between 1024 and 481px it scales down to 1.0 and when the player width is 480px and below it scale down to 0.6.
Of course these values can be adjusted for your needs and future devices.

Start off by downloading the component and then double click to add to the User-Defined category.

The Open Website button, once the component is added to a skin and under the information container you will see a text box with the ID website_1.
This has a Go To URL action please set the website it will open in the Go To URL action.

Screen Shot 2017-07-02 at 16.48.39.png
Screen Shot 2017-07-02 at 16.48.39.png (54.06 KiB) Viewed 520 times

To add another button for a different popup copy this and change the ID to website_2.
Under the elements Visibility Logic Block change the logic blocks Value to 2:

Screen Shot 2017-07-02 at 16.50.58.png
Screen Shot 2017-07-02 at 16.50.58.png (34.89 KiB) Viewed 520 times

Then under the actions change the Go To URL action to point to the next website.

For more buttons just copy the above but changing the ID to website_3 and change the Value to 3 and set what website to open and so on.
Save and close the skin.

Add a Hotspot in the hotspot viewer mode.
Then under the hotspot properties set the following:

Screen Shot 2017-07-02 at 16.55.12.png
Screen Shot 2017-07-02 at 16.55.12.png (106.55 KiB) Viewed 520 times

Select Type to Image and give it a title.
Use the description text box for the popups body text.
Use the Link Target URL’s blues folder icon to select your image for the popup.
In the Target text field add the number for the open website button you set in the skin.
Example, 1 will open the default website button that comes with the component.

Note if you do not want a website button in one of popups you still need to add a number in the Target text field but you would just not add a button in the skin editor for it to open.

If you are not going to use the website button at all then there is no need for the variable or the website button to be in the skin. Also you can remove the set variable value action in the Hotspot Template and no need to add a number to the Hotspot Target to change the variable.

(21.62 KiB) Downloaded 41 times

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest