AEvent seamlessly integrates with your Elementor pages, allowing you to connect your Registration Page, Confirmation Page, and Replay Page at a code level.
Don't be intimidated by the term "code" – we've made it easy! This means we ensure your campaigns maintain their desired appearance and functionality.
In the following sub-tutorials, we'll walk you through every step of the setup and integration process. This way, you can confidently use your AEvent-integrated Elementor pages and ensure they match your exact preferences. |
Page Builder:
|
Registration Page Tutorials:
Integrate AEvent with Your Elementor Registration Page
In AEvent, you have the use of Codes and Scripts, with Countdown Timer elements and other Dynamic Page Elements to use on your Elementor pages.
To use the features of AEvent, you will need header scripts set up with Elementor.
You will need to create your pages in WordPress first to be able to connect the AEvent codes and scripts to your Elementor-built pages.
You need to have the Registration Page, Confirmation Page, and/or a Replay Page.
In AEvent
Go into AEvent and to the Timeline you are using. The following process is the same for all three pages. The only difference is the page you attach.
In the setting to the left, you want to select Code.
Make sure you are on the Page Tab you want to use.
You will see all Codes and Dynamic Elements you can use on your Elementor Pages.
For this step, just find and Copy the Header Script from here and then go to your WordPress Dashboard.
In WordPress
You will need to connect Elementor's Custom Code to the page you want the AEvent Script on, and you cannot do this until you have the pages at least in a draft state.
Go to the Elementor plugin and go to Custom Code.
In the top left of Custom Code Settings, select Add New.
Label this so you know what it is.
The location is <head>
If you need to set an order to the Script/Code, you can use the priority.
Paste the Header Script you copied from AEvent.
Select Publish when done.
The Publish Settings
Once you click the Publish button, a new window opens for the Publish Settings.
You'll need to set up where this script is used on your site.
We want the script to be on Single page in this Step and not Entire Site.
You want to select Singular, Pages, or Landing Pages, and the page you are using, and then select the Save & Close button at the bottom.
e.g., Registration Page - this could be a Confirmation or Replay page.
You will see it in the Dashboard.
Now you are able to use the Codes and Scripts, with Countdown Timer elements, and other Dynamic Page Elements that are offered in AEvent on your Elementor Pages.
Integrate AEvent Form Code with Your Elementor Registration Page
You will need to reach out to support to receive your form's custom code, to be used on your Elementor Registration Page.
You can email Support at [email protected], or you can use the support bubble in the lower left of your AEvent Dashboard to start a chat.
You will need to have an HTML Element on your page that you can paste in the custom code you got from Support to create the form.
This is an example of the form on a colored background on the page - other than the button, the form comes transparent, so it can be put anywhere.
Using AEvent's Dynamic Page Elements With Your Registration Page
Now, as long as you have the Header Script set up, you can also use the Dynamic Page Elements at the bottom of the Code Settings of the Registration Tab.
You have to have the Timeline Scheduled to see the Dynamic Page Elements you used, like the Countdown timer.
Creating a Multi-Option dropdown menu in Elementor for your Registration page
How to implement a multi-option dropdown menu in Elementor for your registration page.
This feature allows you to provide users with a selection of options, such as different event times, making it easier for them to choose their preferred time slot. By following these steps, you can enhance the user experience and increase registration options for your events.
Step 1: Enabling Multi-Option Dropdown Menu
In AEvent:
Within your timeline, click on the "Registration" option.
In the "Setup Type" box, click on "Edit".
In that popup, select "Multi-Option Dropdown Menu" setting.
After selecting the Multi-Option Dropdown Menu, click on "Update" to apply the changes.
Step 2: Adding the Dropdown Menu
In Elementor:
You will need to reach out to support for your HTML form custom code to use on your Elementor Registration Page.
You can email Support at [email protected] or you can use the support bubble in the lower left of your AEvent Dashboard to start a chat.
Support will create and give you a link to a Google Doc with your custom code.
You will need to have an HTML Element on your page that you can paste in the custom code you got from Support to create the form.
Once you get the code back from Support and paste in the HTML element, your form will look like this:
Previewing the Registration Page
Click on "Preview" to see the changes made to your registration page.
Verify that the dropdown menu displays the scheduled webinar options. Users can now select their preferred event time, fill in their details, and complete the registration process smoothly.
By providing users with a selection of event times, you've improved the registration experience and made it more convenient for attendees to choose their desired time slot.
This engaging feature will help increase registration rates for your events and provide a seamless registration process.
Creating A Multi-Session Layout For Your Elementor Registration Page - Coming Soon
Confirmation Page Tutorials:
Integrate AEvent with Your Elementor Confirmation Page
In AEvent, you have the use of Codes and Scripts, with Countdown Timer elements and other Dynamic Page Elements to use on your Elementor pages.
To use the features of AEvent, you will need header scripts set up with Elementor.
You will need to create your pages in WordPress first to be able to connect the AEvent codes and scripts to your Elementor-built pages.
You need to have the Confirmation Page at least in the Draft Status.
In AEvent
Go into AEvent and to the Timeline you are using. The following process is the same for all three pages. The only difference is the page you attach.
In the setting to the left, you want to select Code.
Make sure you are on the Page Tab you want to use.
You will see all Codes and Dynamic Elements you can use on your Elementor Pages.
For this step, just find and Copy the Header Script from here and then go to your WordPress Dashboard.
In WordPress
You will need to insert Elementor's Custom Code on the page you want the AEvent Script on, and you cannot do this until you have the pages at least in a draft state.
Go to the Elementor plugin and go to Custom Code.
In the top left of Custom Code Settings, select Add New.
Label this so you know what it is.
The Location is <head>
If you need to set an order to the Script/Code, you can use the priority.
Paste the Header Script you copied from AEvent.
Select Publish when done.
The Publish Settings
Once you click the Publish button, a new window opens for the Publish Settings.
You'll need to set up where this script gets used on your site.
We want the script to be on Single page in this Step and not Entire Site.
You want to select Singular, Pages, or Landing Pages, and the page you are using, and then select the Save & Close button at the bottom.
e.g., Registration Page - this could be a Confirmation or Replay page.
You will see it in the Dashboard.
Now you are able to use the Codes and Scripts, with Countdown Timer elements, and other Dynamic Page Elements that are offered in AEvent on your Elementor Pages.
Using AEvent's Dynamic Page Elements With Your Confirmation Page
Now, as long as you have the Header Script set up, you can also use the Dynamic Page Elements at the bottom of the Code Settings of the Confirmation Page.
This allows you to add the registrant's name to the page and provide a Join link as well.
You have to have the Timeline Scheduled to see the Dynamic Page Elements you used, like the Countdown timer.
For example, you can put the first name of the registrant.
Integrate AEvent 'Add To Calendar' Integration Into Your Elementor Page
If you have added & activated the Add To Calendar Integration on the timeline, then you will see a code section to edit and retrieve the code, and this is only seen in the Confirmation Tab of the Code Settings. This element is not available for any other page.
You can choose from some of the images, and when you are set, you can click the Copy on the right of the section.
Paste the Code from AEvent into Elementor, where the Calendar is going.
Like the other elements we added, for it to work, you will need to have a Timeline scheduled for the calendar selection to work.
💪 Advanced Level
You can add any image you want for your calendar
by changing this code once it is pasted into Elementor.
If you change out the "img src" section in the screenshot above with your own image, you can use any icon of your choice.
This was integrating AEvent with the Confirmation Page using the page builder Elementor.
Setup a Personalized Join Link Message on Elementor's Confirmation Page
Adding Personalized Join Link Messages
You can also provide your registrants with a join link on the confirmation page. But we need to change the code slightly.
To display the link, you will need to use the Shortcode option.
Now, you can use the Shortcode element, but you are unable to customize the size, fonts, and colors.
We suggest you use the Heading or Text Editor Elements as you are able to adjust the Style, so you can set Alignment, Typography, and more.
In Elementor, you will need to create a text box with the Heading or the Text Editor.
Once you have that, you will need to:
Click the Dynamic Tag option in the top corner of the text box.
Then in the dropdown under Site, select Shortcode.
Now just click on the Shortcode option, and a Settings window opens.
Here is what you want to copy:
<a href="{!joinurl}">Here Is Your Join Link</a>
Paste the Shortcode in the Settings popup.
We put ours under the Calendar integration, and as you can see, the "Here Is Your Join Link" text is below it.
NOTE: Shortcodes:
Only the Join links need to use this!
If you want to use the {{!joinurl}} or {{!platformurl}} you will want to use the Shortcode here:
<a href="{!joinurl}">Here Is Your Join Link</a>
How the URL will look when clicked
If you want to use the {{!platformurl}}, you will want to use the Shortcode here:
<a href="{!platformurl}">Here Is Your Join Link</a>
How the URL will look when clicked
They will not look and work right if you try to use them like the rest of the Dynamic Page Elements.
Replay Page & Additional Tutorials:
Integrate AEvent with Your Elementor Replay Page
In AEvent, you have the use of Codes and Scripts, with Countdown Timer elements and other Dynamic Page Elements to use on your Elementor pages.
To use the features of AEvent, you will need header scripts set up with Elementor.
You will need to create your pages in WordPress first to be able to connect the AEvent codes and scripts to your Elementor-built pages.
You need to have the Replay Page already built and at least in Draft status.
In AEvent
Go into AEvent and to the Timeline you are using. The following process is the same for all three pages. The only difference is the page you attach.
In the setting to the left, you want to select Code.
Make sure you are on the Page Tab you want to use.
You will see all Codes and Dynamic Elements you can use on your Elementor Pages.
For this step, just find and Copy the Header Script from here and then go to your WordPress Dashboard.
In WordPress
You will need to connect Elementor's Custom Code to the page you want the AEvent Script on, and you cannot do this until you have the pages at least in a draft state.
Go to the Elementor plugin and go to Custom Code.
In the top left of Custom Code Settings, select Add New.
Label this so you know what it is:
The Location is <head>
If you need to set an order to the Script/Code, you can use the priority.
Paste the Header Script you copied from AEvent.
Select Publish when done.
The Publish Settings
Once you click the Publish button, a new window opens for the Publish Settings.
You'll need to set up where this script sits on your site.
We want the script to be on Single page in this Step and not Entire Site.
You want to select Singular, Pages, or Landing Pages, and the page you are using, and then select the Save & Close button at the bottom.
e.g., Registration Page - this could be a Confirmation or Replay page
You will see it in the Dashboard
Now you are able to use the Codes and Scripts, with Countdown Timer elements, and other Dynamic Page Elements that are offered in AEvent on your Elementor Pages.
Using AEvent's Dynamic Page Elements With Your Replay Page
Now, as long as you have the Header Script set up, you can also use the Dynamic Page Elements at the bottom of the Code Settings of the Replay Page.
This allows you to add the registrant's name to the page and provide a Join link as well.
You have to have the Timeline Scheduled to see the Dynamic Page Elements you used, like the Countdown timer.
⚠️ IMPORTANT: Secure Access with Self-Expiring Pages ⚠️
When the Header Script is in place, and the timeline is set to active, accessing the replay page without proper credentials is restricted.
The credentials usually consist of a registration link or replay link that is valid for a specific time. These self-expiring links ensure that unauthorized users are locked out after the designated time period.
NOTE: To test the functionality, it is a requirement your link has either a Webinar ID or Registrant ID, as shown below:
https://YOUR_REPLAY_PAGE_LINK?webinar=XXXXXXX
or
https://YOUR_REPLAY_PAGE_LINK?r=XXXXXX
If you want to make the replay page accessible without time restrictions, you can set the timeline to inactive. However, keep in mind that once the timeline is inactive, anyone can access the content.
The self-expiring feature is designed to create a sense of urgency and offer true automation for your pages.
Add AEvent's Countdown Timer On Your Elementor's Registration, Confirmation, and Replay Pages
By doing so, you'll be able to display the countdown timer you designed in AEvent on your Elementor pages, synchronizing it with the date of your event.
This will create a sense of urgency and excitement among your audience, boosting attendance and engagement.
Adding A Countdown Timer
You have the option to add a Countdown Timer to your Registration Page, Confirmation Page, and your Replay Page.
In AEvent, you will need to go back to the Code Settings. Here is where you can customize your timer to use on the Page you want to add the time to.
To customize the timer, click the Cog Wheel and the Settings on the right, which will allow you to edit the Timer how you want. Click Update when you are done.
To the right of the Countdown Settings, you can copy the HTML Code. You will need this code to add to your Registration Page.
In WordPress
As you are editing the Registration Page, you will want to add an HTML Element to where you want to have your customized Countdown Timer.
Once you have a spot for the timer, search HTML in Elementor for the element.
The Code window opens, and here is where you can Paste the Countdown Timer code you copied from AEvent.
That is it! This is how you add the timer to your pages. It is the same process for each page.
NOTE:
To see the Countdown Timer, you need to schedule the timeline you are working on and then you need to preview the page once it is scheduled.
This will create a sense of urgency and excitement among your audience, encouraging them to take action and participate in your event.
Get the TRUE URL of your Elementor's Page
How to obtain the correct URL to ensure that the confirmation page and replay page in AEvent are linked to the appropriate Elementor pages. This step is crucial for seamless integration between Elementor and AEvent.
By the end of this tutorial, you'll be able to accurately locate and retrieve the true URL of your Elementor page, ensuring proper integration with AEvent.
Step 1: Open the page In WordPress
In this example, we will find the Confirmation Page URL. This process is the same for the other pages. Follow the same steps.
Do not go into the page builder. You can find this info on the right side bar.
If you click the URL, it will allow you to edit the Permalink.
Step 2: Use the True Location in AEvent
Copy the URL.
Navigate to AEvent and access the Timeline Settings for the confirmation page or replay page.
Now go to the Advanced Settings.
Click on "Add Page Address".
Here's where you add the URLs you're using i.e., Confirmation Page.
Click the "Update" Button.
You can now see the URL displayed on your dashboard.
Step 3: Save and Test
Once you have replaced the URL with the true location, save the changes in AEvent. Now double-check that the correct URL is now being used for the confirmation page or replay page.
To do that, schedule the event register for it, and see if you get the Confirmation page.
Congratulations! You learned how to locate and retrieve the true URL of your Elementor page. By following the step-by-step instructions, you can ensure that AEvent accurately integrates with Elementor, linking the confirmation page and replay page to the correct locations.
This will provide a seamless experience for your event attendees.
Remember to always use the true URL obtained through this process, as it represents the actual location of your Elementor page.