DIY - Custom Integration Pattern

Webix offers a number of ready-made solutions that integrate it with other JavaScript libraries and frameworks:

integration with various frameworks
integration with popular text editors
integration with charts and planning tools.

However, it's not possible to provide support for all the libraries or tools that exist in huge number on the Web. If you haven't found the needed solution among the built-in ones, you can write your own integration pattern. Webix offers an elegant way to do this.

The main thing here is to create a new Webix component that will display the needed tool on the page.

webix.protoUI({
    name:"myCustomName",
    $init:function(config){ ... },
    // other methods
}, webix.ui.view);

This prototype component should inherit from view, a base class for all the ui-related components. A pure view doesn't contain any info and acts as a placeholder for the real component.

It can have any number of properties and methods with two of them being mandatory:

name - property that defines view name you will use during initialization
$init - function that is executed on component initialization. It's argument is the component's configuration object.

The following code will instantiate the above-created object and display it on the page:

webix.ui({
    view:"myCustomName",
    // config
});

To learn more about how to create a custom object in Webix, go to the corresponding documentation article.

HipChat Integration

Let's take a HipChat, a popular professional chat solution with an opportunity to work on the web.

Prototype Component

webix.protoUI({
    name:"hipchat",
    $init:function(config){
        //configuration params
        var params = [
            "anonymous=true",
            "minimal=true",
            "timezone="+config.timezone,
            "welcome_msg="+(config.welcome_msg||"Welcome to Webix Hub Chat")
        ];
        //building full url
        var url=config.url+(config.url.indexOf("?")>0?"&":"?")+params.join("&");
        if (url.indexOf("https://") !== 0)
            url = "https://" + url;
 
        //loading the hipchat
        var html="<iframe src='"+ url+"'frameborder='0' width='100%' height='100%'>
                    </iframe>";
        this.$view.innerHTML = html;                           
    },
}, webix.ui.view);

Initializing HipChat on a page:

webix.ui({
    view:"hipchat",  url: "YOUR_GUEST_ACCESS_URL", timezone: "PST"
});

You get the URL value through Hipchat client when you share the room access.

Related Sample: HipChat Integration