FlexView API - Detailpages and Customization ∞

Integrate the outdooractive FlexView API with page load and customize the style with help of CSS.

Our Quickstart Guide describes how easy a basic FlexView API integration is done, how the basic html template looks like and how an outdooractive API key and a project key is used.

This workshop teaches how an integration including detail pages looks like and how easy the style may be customized.

Easy integration without iframes

The outdooractive FlexView API adds interactive views to a web page with some lines of javascript and by passing a configuration object. An empty <div></div> container is filled with additional DOM nodes by our javascript library.

<div class="oax-top-cont"></div>

Integrating FlexView without using iframes is easy to use and has some important advantages. It is integrated without the need of a fix width and height leading to scroll bars, configuration is done with a clear javascript structure instead of a bunch of url parameters and it allows full css control to do style customization.

Detailpages

The Quickstart guide describes the basic single page integration. It is easy to tell FlexView to load custom pages as soon as a tour’s details should be rendered:

conf.actionOpenType = "page-load";

conf.openOOIUrl = function(data) {
    return "tour.detailpage.html?id=" + data.id;
};

The function defined as openOOIUrl() allows you to set the url opened as soon as a tour is selected.

The outdooractive FlexView API offers an easy way to implement a tour detail page.

Please see our FlexView API Example and have a look at the html source.

CSS Styling

It is easy to customize outdooractive FlexView API integrations with help of css styling. Add your own css style overwriting .oax classes. Use tools like Firebug or browser development tools to inspect the dom elements and to learn how to style FlexView.

css styling