Mac SEO Blog

Two of EverWeb 4.5‘s new features, On Click Actions and Popup Windows can be easily and effectively combined to make it easy to trigger actions based on user interaction in the pages of your EverWeb site.

On-Click Actions allow you to trigger actions when a visitor clicks on an object on the page, such as a button. You can even daisy-chain use On Click Actions to trigger a sequence of actions if you need to .

In this post, we are going to look at how to combine On Click Actions with another new EverWeb 4.5 feature, Popup Window. We are going to create a Video Popup Window that will display in the bottom left hand corner of the screen when a button is clicked on in the page.

Exploring The Popup Window’s Close Button

To start, let’s add a Popup Window to the page. Select the page you want the Popup Window to appear on, then click on the Popup Windows button in EverWeb’s Toolbar. Select the option ‘New Popup Window’. A new Popup Window will be added to the page. 

Name the Popup Window ‘On Click Video by clicking in the Popup Window’s Object Label, which by default is ‘Popup Window’. Rename the Popup Window then press Enter to finish.

The next thing we want to do is to click on the Close button in the top right-hand corner of the Window. This is where we will see On Click Actions at work, but that for later on… in the meantime, click on the Metrics Inspector. Notice that the Close button has its proportions constrained so that it keeps its length and height in proportion if you resize it. The next thing to note is that ‘Allow Free Dragging’ is set on. This means that you can move the button around the Popup Window and pin it to whichever sides you want. Use the ‘Pin Settings’ button for this purpose if you need to. The last thing of note here is that the icon has ‘Always on Top’ set on so that it always floats above other objects within the Popup Window.

In this example, let’s change the color of the Close button. Click on the Shape Options tab then change the Fill Color to something else. In this example, I am going to use green. I can also change the button used if I want to as well. To do this, go to the Background Mask section. You will see the Close button in the Background Mask’s preview window. Note that it is an SVG file, so will not lose resolution at scale.

Click on the preview image on the left-hand side of the Background Mask section. Click on the User Interface selection and choose a different Close button. In this example, I am going to use a filled in circle with a cross in the middle of it. After changing the icon, you will notice that the button uses the color we chose earlier.

Next, position the Close button so that it sits in the top right corner of the Popup Window. You should not need to adjust the Pin Settings as they are already set to pin the button to the top and right-hand edges of the Popup Window.

The Close Button’s On Click Action

Now that the Close button has been styled and positioned as we want, let’s look at its On Click Action. Click on the Hyperlinks tab in the Inspector Window. You will see that the On Click Action section is open and that there is one item in the On Click Action list. This shows that when the button is clicked, the parent container, i.e. the Popup Window, will close.

Creating The Video Popup Window

Now let’s create our video popup. Click on the Add button in the middle of the Popup Window. Choose ‘Video’. This will add a Video Fill to the Popup Window. Click on the Shape Options tab if it is not already selected. Choose the video that you want to play in the Fill section. Usually it is best to link to a video rather than to embed a video in to your project. In this example, I am going to change External Video URL to YouTube. I can then easily add in my YouTube video link in the field below. Choose the appropriate options. Remember that it is important that ‘Show Controls’ is checked so that the user can play the video. The one option you should not check is ‘Auto Play’. If you checked this, the video will automatically play when the page loads, which is not what we want, so do not check this option!

The next step is to match up the Video Fill and the Popup Window so that the latter appears like a frame around the video. In my example, I need to widen the video and reduce the dimensions of the Popup Window until the Video Fill is framed how I want it.

When adjusting the Popup Window, you will notice that the video sits at the top of it. To change this, first make sure that the Popup Window is selected. Next, go to the Widget Settings and set Object Alignment, Vertical to ‘Middle’. Reframe the video within the Popup as desired. Whilst we have the Widget Settings open, let’s also position the Popup Window into the bottom right-hand corner, using the Position dropdown menu option. The last thing we need to do is to set how the Popup Window will be triggered. Change the ‘Popup Trigger’ to ‘Manual’.

We are almost done with the Popup Window. The last thing I want to do is to change the background color of the Popup Window. As it is still selected, we can go back to the Shape Options tab and change the Color Fill to the color we want. Make sure that the frame contrasts with the color of the Close icon.

Creating an On-Click Action Button

The final task is to create a button that when clicked upon, causes the Popup Window to appear. Add a rectangle shape to the page and add a button text to it, for example ‘Press Me!’ With the button still selected, go to the Hyperlinks Inspector.

Now we need to set up our On Click Action. In the Action field, set the menu option as ‘Show’. Next click in the Element field. Choose ‘On Click Video’ from the list of objects. The last step is to click on the Add button so that the On Click Action is added to the list of actions.

Testing and Publishing

Click on Preview to test. To fully test, publishing may be better as you will then see the YouTube video in action.