Hello,
In this tutorial, we will create a button and use it to open a popup widget.
STEP1: Create a CTA button widget
This step is optional, if you have already a button to use on your website, you won't need to create and embed a button
Going to use this template CTA Button
STEP2: Create a popup
For this, we're going to use this template with Iframe Popup
- Edit the layout and click "next"
- Select the option trigger "When visitor performs an action"
- Select "click" and insert the XPATH of the button (see below how to extract it)
STEP3: Extract element XPATH
If you are using CTA Button widget
If you are using the CTA button widget, you can insert the XPATH following this format
//*[@data-ouid="WIDGET_ID"]/main/div/div/div
To get the button ID, you can visit the widget details page and extract it from the URL
For example, if the URL look like this:
https://fouita.com/dash/...../widgets/0xdf9e7/overview, the widget ID is 0xdf9e7
If you are not using CTA Button widget
If you have an element inside your website or you are using different widget inside your page, you can extract the XPATH using a simple method.
- Right-click on the element inside your page, then click "Inspect elemen"
- Go to the element highlighted and "Right-Click" again, then go "Copy" > "Copy Xpath"
STEP4 Use the XPATH element in the triggers
Once extracted, we can now paste the XPATH into the input field.
That's it, now we just need to embed our widgets inside the page.
We hope this helps,
Feel free to comment below or reach out to us if you have any issues.
Thanks!
