This Pro tutorial provides information on two ways a Bricks Popup can be shown on page load depending on whether the URL has a specific URL parameter with a specific value.
Ex.:
Show the popup only if the page URL is
https://example.com/sample-page/?etsTicketWidget=basket-detailAfter implementing the tutorial, the popup will not appear if the query string is not present when accessing this page or when the value of etsTicketWidget is something other than basket-detail.
Step 1
Create a Bricks template of the type Popup and add your desired elements inside.
Click on the Settings (gear) icon → TEMPLATE SETTINGS → CONDITIONS and specify where the popup should appear.
Ex.:
Method 1 – bricksOpenPopup()
Edit with Bricks your Page or template where the popup should be shown.
In the Page Settings → Body (footer) scripts area, add
<script>
document.addEventListener( 'DOMContentLoaded', function() {
const urlParams = new URLSearchParams( window.location.search );
const etsTicketWidget = urlParams.get( 'etsTicketWidget' );
if ( etsTicketWidget === 'basket-detail' ) {
setTimeout( function() {
bricksOpenPopup( 246 );
}, 1000 ); // 1000 milliseconds = 1 second
}
} );
</script>Replace 246 with the ID of your popup template.
This method will only work if there is Bricks content.
If there’s none on your Page, you could instead add the code w/o the opening and closing script tags in a Code element’s JavaScript area.
Replace etsTicketWidget and basket-detail as appropriate.
Method 2 – using a Condition
Edit your Popup with Bricks.
Select the outer-most element in the structure.
Apply a Current URL condition on it.
For the value, enter your desired query string.
Click on the Settings (gear) icon → TEMPLATE SETTINGS → POPUP.
Add a Content loaded Interaction like this:
