Visit arlo.co Contact

JavaScript Web Controls

Adding web controls onto your website

Available on:
  • Simple
  • Professional
  • Enterprise

Below are basic instructions on how to implement Arlo's various web controls into your website and connect to your Arlo platform. To successfully implement the Arlo web control technology you will require experience(or access to someone with experience) in HTML, CSS and JavaScript as well as referencing external JS libraries and dependencies. If you have a website developer please provide them with these instructions. 

If you do not have a web developer, we provide a range of website integration packages and plans, contact the Arlo web team for more information, or visit our website pricing page. 

Review developer documentation and web control requirements

In-depth notes for the implementation of web controls along with technical information can be found in the developer documentation site. Before implementing controls please ensure all minimum web control requirements are met.

Choose your web controls

Arlo offers a library of prebuilt web controls ready to drop onto any site with the power to extend
and customise to meet your unique needs. It's important to understand the type of training and events you want to promote on the website and ensure you use the correct controls to do the job. View Arlo's library of prebuilt web controls and select "Try" to access the codepen file for each web control.

We highly recommend developers review this documentation above before starting the integration. The process below is just a guide for implementing the web controls. This guide is not a substitute for the existing web control developer documentation.

Customise your web controls to suit your brand

Whether it's just changing the colours to align with your websites colour scheme or completely changing the format and style, the Arlo web controls are designed to be customised to fit with your brand. Style the fonts, colours, buttons, layout and even add animation - the web control technology sets your developers free! Find out more about website integration formatting, styling and customisation.

Connect your web controls to your Arlo platform

All web controls will be connected to Arlo's dummy data platform by default. Dummy data allows you to view the web controls with complete data - this is particularly useful when implementing the controls. You can update the web controls to pull events from your Arlo platform by changing the “platformID” at the top of the JavaScript from websitetestdata.arlo.co to yourplatform.arlo.co

Reference JavaScript dependencies within HTML

Each control has HTML, CSS and Javascript. In the HTML each control has a 'dependencies' section. These sometimes include jQuery and/or Bootstrap.js, if either of these are already installed on your site remember to remove the references to them from the web control dependencies section. When adding the code to your site, make sure the Javascript comes after the 'dependencies' section in the HTML.

Reference CSS / JavaScript dependencies from codepen settings

Some web controls have an external reference to CSS and JavaScript such as Font Awesome and Bootstrap found within the codepen settings. Please click “Settings” on your codepen file (top right) to view “Pen Settings”, select the ‘CSS’ tab and add references listed under ‘Add External Stylesheets/Pens’ to your site unless already installed. Select the ‘JavaScript’ tab and follow the same process as CSS. If not references are listed under ‘Add External Stylesheets/Pens’ you can ignore this step.

Implement web controls onto your web page
Event template page
  1. Open the event template codepen file.
  2. Copy the HTML, CSS and Javascript for the event template control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. Update the CustomURL’s within the HTML - enter the URL of the page you will be implementing the following controls on e.g. www.mywebsite.com/event-template/ (Look for ‘customUrls’).
    1. “eventtemplate” e.g. event template web control page
    2. “venue” e.g. venue profile web control page
    3. “presenter” e.g. presenter profile web control page
Presenter profile page
  1. Open the presenter profile codepen file.
  2. Copy the HTML, CSS and Javascript for the presenter profile control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. Update the CustomURL’s within the HTML - enter the URL of the page you will be implementing the following controls on e.g. www.mywebsite.com/event-template/ (Look for ‘customUrls’).
    1. “eventtemplate” e.g. event template web control page
    2. “venue” e.g. venue profile web control page
    3. “presenter” e.g. presenter profile web control page
Presenter list
  1. Open the presenter list codepen file above.
  2. Copy the HTML, CSS and Javascript for the presenter list control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. Update the CustomURL’s within the JavaScript & HTML - enter the URL of the page you will be implementing the following controls on e.g. www.mywebsite.com/presenter/ (Look for ‘customUrls’).
    1. “presenter” e.g. presenter profile web control page
Venue profile page
  1. Open the venue profile codepen file above.
  2. Copy the HTML, CSS and Javascript for the venue profile control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. To allow the venue maps to show you will need to generate a Google Maps API key with the following API’s enabled and replace the temporary API key within the JavaScript of the web control (Look for ‘googleMapsAPIKey’).
    1. Google Maps Embed API
    2. Google Static Maps API
    3. Google Maps JavaScript API
Venue list
  1. Open the venue list codepen file above.
  2. Copy the HTML, CSS and Javascript for the venue list control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. Update the CustomURL’s within the JavaScript - enter the URL of the page you will be implementing the following controls on e.g. www.mywebsite.com/venue/ (Look for ‘customUrls’).
    1. “venue” e.g. venue profile web control page
  6. To allow the venue maps to show you will need to generate a Google Maps API key with the following API’s enabled and replace the temporary API key within the JavaScript of the web control (Look for ‘googleMapsAPIKey’).
    1. Google Maps Embed API
    2. Google Static Maps API
    3. Google Maps JavaScript API
Event list (Upcoming events)
  1. Open the event list codepen file above.
  2. Copy the HTML, CSS and Javascript for the event list control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. Update the CustomURL’s within the JavaScript - enter the URL of the page you will be implementing the following controls on e.g. www.mywebsite.com/venue/ (Look for ‘customUrls’).
    1. “eventtemplate” e.g. event template web control page
    2. “venue” e.g. venue profile web control page
    3. “presenter” e.g. presenter profile web control page
Online activities list
  1. Open the online activities list codepen file above.
  2. Copy the HTML, CSS and Javascript for the online activities list control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. Update the CustomURL’s within the JavaScript - enter the URL of the page you will be implementing the following controls on e.g. www.mywebsite.com/venue/ (Look for ‘customUrls’).
    1. “eventtemplate” e.g. event template web control page
    2. “venue” e.g. venue profile web control page
    3. “presenter” e.g. presenter profile web control page
All-in-one event list
  1. Open the All-in-one codepen file above.
  2. Copy the HTML, CSS and Javascript for the online activities list control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. To allow the venue maps to show you will need to generate a Google Maps API key with the following API’s enabled and replace the temporary API key within the JavaScript of the web control (Look for ‘googleMapsAPIKey’).
    1. Google Maps Embed API
    2. Google Static Maps API
    3. Google Maps JavaScript API
Calendar
  1. Open the calendar codepen file above.
  2. Copy the HTML, CSS and Javascript for the calendar control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. Update the eventURL within the JavaScript - enter the URL of the page you will be implementing the following controls on e.g. www.mywebsite.com/event-template/?eventtemplate={templateID} (Look for ‘eventUrl’).
    1. “ eventURL” e.g. event template web control page including ?eventtemplate={templateID}
Catalogue
  1. Open the catalogue codepen file above.
  2. Copy the HTML, CSS and Javascript for the catalogue control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. Update the CustomURL’s within the HTML - enter the URL of the page you will be implementing the following controls on e.g. www.mywebsite.com/event-template/ (Look for ‘customUrls’).
    1. “eventtemplate” e.g. event template web control page
    2. “venue” e.g. venue profile web control page
    3. “presenter” e.g. presenter profile web control page
Index
  1. Open the index codepen file above.
  2. Copy the HTML, CSS and Javascript for the index control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. Update the CustomURL’s within the JavaScript- enter the URL of the page you will be implementing the following controls on e.g. www.mywebsite.com/event-template/ (Look for ‘customUrls’).
    1. “eventtemplate” e.g. event template web control page
    2. “venue” e.g. venue profile web control page
    3. “presenter” e.g. presenter profile web control page
Schedule
  1. Open the schedule codepen file above.
  2. Copy the HTML, CSS and Javascript for the schedule control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. Update the CustomURL’s within the HTML - enter the URL of the page you will be implementing the following controls on e.g. www.mywebsite.com/event-template/ (Look for ‘customUrls’).
    1. “eventtemplate” e.g. event template web control page
    2. “venue” e.g. venue profile web control page
    3. “presenter” e.g. presenter profile web control page
Homepage widgets
  1. Open the widget codepen file above.
  2. Copy the HTML, CSS and Javascript for the homepage widget controls onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
    1. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
    2. Update the CustomURL’s within the JavaScript- enter the URL of the page you will be implementing the following controls on e.g. www.mywebsite.com/event-template/ (Look for ‘customUrls’).
    3. “eventtemplate” e.g. event template web control page
    4. “venue” e.g. venue profile web control page
    5. “presenter” e.g. presenter profile web control page
Event dates only list
  1. Open the event dates codepen file above.
  2. Copy the HTML, CSS and Javascript for the event template control onto a new page on your website.
  3. If external references to CSS or JavaScript is required make reference to these - refer to steps 5 & 6 above.
  4. Update the platformID to your own Arlo platform name e.g. yourplatform.arlo.co
  5. If you want to filter this control to only show a specific template you can add a filter.
    1. Under var eventList in the JavaScript add: 
filter: { 
	code: [“XYZ”] // XYZ represents the Arlo template code
}
Connect your Arlo platform to your website integration

Once you have implemented your web controls, you are required to connect your Arlo platform to your website integration. This lets Arlo know where on your website, the web controls are located, so that the website URL's on the platform are correct.

Learn how to connect your Arlo platform to your website integration.

Choose and style your checkout

Once you've implemented your web controls, and connected your Arlo platform to your website integration, you are ready to select either a 'Standard' or a 'Custom' checkout. You can style and customise your checkout regardless of which checkout option you go with(optional but recommended). Styling a 'Custom' checkout, will require HTML, CSS and Javascript experience. 

Learn how to choose and style your checkout.

Have more questions?

Submit a request
Return to top

Related articles

Was this article helpful?

0 out of 0 found this helpful