To integrate your azavista website in your own website, you can do this by following the next steps:
1) Determine in which spot of your own website the iframe has to be incorporated
(as a sample: http://goto.azavista.com/ demo/myregistrationpage.html ) - this file is attached in this message
2) Go to the event and copy the public registration link (orange share website link):
https://app.azavista.com/event_website_pages/view/home/57752779-a614-478a-977f-763cac110005/a18c04d986
Your link should look similar to this and you can find this link by clicking the 'Share website link' on the event website overview.
3) Copy out the relevant part : 57752779-a614-478a-977f-763cac110003/a18c04d986
This is your event id and is different for every event that has been set up in Azavista so this part is changing for every integration you want to do.
4) In the page where the iframe should come, find the correct place (this should be done by the website maintainer)
5) Copy the following code in this spot :
<!-- AZAVISTA IFRAME AND CONFIGURATION START -->
<iframe id="AzavistaFrame" src="" width="100%" height="100%" frameborder="0" onload="window.parent.parent. scrollTo(0,0)"></iframe>
<script>
var _aza = _aza || {};
_aza.fullPage = false; // true if the iframe with ID AzavistaFrame takes the whole page
_aza.baseUrl = 'https://app.azavista.com';
_aza.defaultUrl = _aza.baseUrl + '/event_website_pages/view/ home/57752779-a614-478a-977f-763cac110005/a18c04d986';
(function() {
var d=document, g=d.createElement("script"), s=d.getElementsByTagName(" script")[0]; g.type="text/javascript";
g.defer=true; g.async=true; g.src=_aza.baseUrl+"/js/ events_website.js"; s.parentNode.insertBefore(g,s) ;
})();
</script>
<!-- AZAVISTA IFRAME AND CONFIGURATION END -->
6) Make sure you have replaced the relevant part (Bold part)! This is different for each event !!!!!!
7) Go to the event in Azavista, and edit the event properties ("Edit General Info")
8) Enter the location of the website page as determined in 1) into the field : 'External website'
Testing :
9) Put the link of 1) in your browser, you should see the correct registration form
10) Put a test user in the event, sent a registration invitation to yourself,
11) Open the registration link in an incognito browser (or logout from Azavista first)
12) The link starts with https://app.azavista.com/.... but when clicked Azavista redirects to the IFrame page, the user should see his own registration details
13) Repeat this process and test the workflow in your mobile browser.
Mobile responsiveness :
The Azavista registration website is mobile responsive. This means that on smaller devices (like phones), or when the user re-sizes the webbrowser, the registration website switches from a 2 column to a 1 column representation. In very rare cases, when using an IFrame, this does not happen. The solution for this is to add a meta tag to html page calling the IFrame. If this is the case please add following meta tag to the <head> section of the page :
<meta name="viewport" content="width=device-width, initial-scale=1">
Comments
0 comments
Please sign in to leave a comment.