In this guide, we'll show you how to sell registrations on your website using some custom javascript and css that will create a popover on your website that contains your RegFox page. This will create a window overlay on top of your own website with your Regfox registration page.
This guide requires you to have access to the code of your website to implement. If you are using a website builder like Wix, Squarespace, Webflow, Wordpress, this method works too.
Check back as we will try to support additional implementations with code examples over time.
Method 1: Popover with Button Included in Code
Step 1: Add the following custom CSS link inside the <head> tag of your website.
<link rel="stylesheet" href=" https://assets.webconnex.com/widgets/embed-modal/modal.css" media="screen" type="text/css">
The first step is to get access to the <head> tag of your website. We would recommend adding this line of CSS to every page of your website, but if your website uses a template file, you can add it once and this file will be loaded on all pages.
While your website may vary here are some links for editing the head tag in some popular builders.
Editing <head> tag using Worpress (your theme or template may vary)
Step 2: Copy and Paste HTML that will add a Button that will Trigger the Popover
This step requires you are able to set specific HTML on your page. In most website editors, you can add an HTML element to your page or toggle your text paragraph to an HTML view. Either way is fine as long as you can edit the HTML.
Find the place in the body of your page where you want the button to appear and paste the following code (that you will need to customize slightly).
<!-- Trigger/Open The Modal --> <button id="myBtn">REGISTER NOW</button> <!-- Modal --> <div id="myModal" class="wbxModal" style="z-index: 9999999"> <span class="wbxModal-close"></span> <!-- Modal Content --> <div class="wbxModal-content"> <iframe src="https://dundermifflin.regfox.com/my-first-regfox-page" style="width:100%;height:100%;border:hidden;"></iframe> </div> </div> <!-- Modal Script --> <script src="https://assets.webconnex.com/widgets/embed-modal/modal.js" type="text/javascript" ></script>
Step 3: Customize the HTML For Your Event Page
Put your nerd glasses on and take a look at the HTML code in order to make this embed code perfect for your event. First, you want to look at the line in the code that says src="https://dundermifflin.regfox.com/my-first-regfox-page" . You will need to replace the page URL inside the quotations with your own RegFox page URL. Make sure to only replace the URL starting at the HTTPS and be sure to keep the quotes, otherwise, it will break.
Secondly, you can modify what the button text reads by looking at the first line of the code snippet and seeing that it currently says REGISTER NOW. That is the text on your button. You can modify the text of the button by replacing that text. Be careful not to remove those little
Step 4: Save, Publish, and Test Your Website
You should be able to test the popover on your website. Now people will be able to register on your website directly.
Method 2: Customize Your Own Website Button to Use the Popover
If your website tool has pre-designed and pre-built buttons that are consistent with your style and theme, this method allows you to use one of those buttons to trigger the popover.
Step 1: Add the following custom CSS link inside the <head> tag of your website.
<link rel="stylesheet" href=" https://assets.webconnex.com/widgets/embed-modal/modal.css" media="screen" type="text/css">
Like in the first method, you are going to include the same code in the head tag of your website.
Step 2: Add a Code Snippet Anywhere in the Body of Your Page
Add a custom HTML object anywhere on your web page. This will be invisible so it doesn't really matter where it goes. This code snippet will control the actual popover, but we will set how to trigger it in the next step.
<!-- Trigger/Open The Modal --><!-- Modal --> <div id="myModal" class="wbxModal" style="z-index: 9999999"> <span class="wbxModal-close"></span> <!-- Modal Content --> <div class="wbxModal-content"> <iframe src="https://dundermifflin.regfox.com/my-first-regfox-page" style="width:100%;height:100%;border:hidden;"></iframe> </div> </div> <!-- Modal Script --> <script src="https://assets.webconnex.com/widgets/embed-modal/modal.js" type="text/javascript" ></script>
Step 3: Customize the HTML For Your Event Page
As before, be sure to replace the dummy Dunder Mifflin sample page with your RegFox page URL. Look at the HTML code and replace the following URL in the code with your own RegFox page. Look for this: src="https://dundermifflin.regfox.com/my-first-regfox-page"
Step 4: Add a Button To Your Web Page and Give it the Appropriate ID
Using your website builder, add or drag a button onto the page where you want to provide the button for people to register. Then using the properties or settings for the button, look for an option to declare an ID on the button. When you find where to put the ID, give the following ID: myBtn
Step 4: Save, Publish, and Test Your Website
You should be able to test the popover on your website. Now people will be able to register on your website directly.
FAQS
How does this work on mobile devices?
This method works excellently on mobile devices and the popover will automatically adjust to the screen of phones.
Does this impact conversion tracking or analytics?
While its always best and recommended to link directly to your RegFox page directly, your traffic stats, conversion tracking, and other integrations will continue to work. Backlink tracking to other sources apart from your website will not be tracked because this method requires your own website to open the window to the registration page.