General

Files

Methods

Using Tidio RWD

Work with Tidio RWD

Check how you can create mobile version of your site step by step.

#1 download and log in

To begin working, install the expansion from Google Chrome Market, and log in using tidiomobile.com user data (click to create an account)

#2 add new project

After signing in, you will see the management panel, click the "add project" button at the bottom, and enter the address of the website to be converted into a mobile version.

#3 go to edit project

Once the project has been added you will see the project list, click "Preview/Edit" to start editing.

#4 edit project

After completing the previous, steps the development panel of your project will be displayed. You need to deal with three tabs: controller.js –for defining controllers, model.js – for defining models, view.css – for entering CSS files

The controller.js tab allows the user to edit parameters, i.e. the logo, menu, and to import or remove css styles - click to see more

#5 controller.js

The controller.js (click here to learn more) enables you to define controllers for your project, tidioModel.homePage is the first, automatically defined one, and can be edited in the model.js tab.

#6 model.js

The model.js tab is responsible for defining models (click here to learn more), for example, homePage is always added and we will define selectors for it in the next step.

#7 model.js - select the item

To choose elements to be displayed in the mobile version – click the "selector from the desktop version" button, and you will see the preview of your website. Now you only need to select elements that are to be transferred to the mobile version.

#8 Model.js - defining a selector

The view.css tab allows you to edit the view of the mobile page, the preview is automatically updated after each change.



Code:

var tidioModel = {
	
  homePage: function(){
	  
      // The selector for elements to be shown in the mobile version.      
	  tidioRWD.showElement('div#wBody > div.wBodyContent.ind > div.wContent.right');
	  	   
  }

};

#9 view.css

The view.css tab allows you to edit the view of the mobile page, the preview is automatically updated after each change.

#10 View.css - defining a selector

To choose the selector for the mobile site, click the "selector from mobile version" and select the element whose style is to be defined, then a window with the chosen selector appears, which now has to be copied and pasted into the field with the code.



Code:

div#wBody > div.wBodyContent.ind > div.wContent.right {
	padding: 15px;
}

#11 Publishing the mobile version

When the work on the mobile site is completed – click the “Publish” button, and a window will be displayed. It contains the code that should follow the <head> tag

Work with the controller

Set basic elements in mobile version and redirect operations to correct model method.

Example use

// controller.js

tidioRWD.create({
    logo: {
    	// Logo type
        type: 'image',
        // Link to logo
        url: 'http://capwaste.co.uk/wp-content/themes/twentytwelve/images/grh/logo.png'
    },
    menu: {
    	// Here you can enter the address of a selector out of which can be automatically downloaded links.
        // You can also individually write links that will be displayed.
        link_list: '#menu-topmenu'
    },
    // You define whether the CSS styles of the site should be removed or not.
    remove_stylesheet: true,
    // The definition of which additional CSS files should be uploaded.
    import_css: []
});

// TidioRWD.route method is responsible for displaying depending on the address of appropriate models
// The first router is responsible for displaying the main page if (location.pathname == \'/\') and passes to the model tidioModel.homePage

tidioRWD.route(function () {

    if (location.pathname == '/')

        return true;

}, tidioModel.homePage);

// This router does not have any condition, always returns "true" so it will be executed when no other can be found
// The data is transmitted to the model of "defaultPage"
tidioRWD.route(function () {

    return true;

}, tidioModel.defaultPage);

// Run Tidio RWD
tidioRWD.exec();

Work with the model

Decide which of elements should be visible in mobile version.

Example use

var tidioModel = {
	
  // Model homePage is responsible for displaying the element \'div # inhalt> p\'    
  homePage: function(){
	  
	  tidioRWD.showElement('div#inhalt > p');
   
  }
  
}      

Work with the view

Adjust look of elements in mobile versions of your site.

Tidio RWD view file, here we define CSS mobile page.

body {
	margin: 0px auto;
	background: white;
	position: relative;
	color: #333;
	font-size: 12px;
}

body * {
	max-width: 100%;
}

/* Logo color and size */

#tidio-mobile-logo {
	background: #fff;
}

#tidio-mobile-logo .logo-image {
	display: block;
	width: 150px;
	margin: 0px auto;
	text-align: center;
}

Description of methods of TidioRWD class

Add Tidio RWD to your site

After creating mobile preview of your site you need to do only one step to show it to the world.

While working in Tidio RWD editor in any moment you can share the view of site rest of your users. You need just to get correct code which shows up after you click ”Publish” button. Code will check if your site is opened by mobile device and will download correct code from Tidio RWD cloud. To publish mobile version of your site add code immediately after tag on every site.

Sites with fixed header

On of most popular technics is to separation of website header to another file (ex. header.php). In this case you only need to add Tidio RWD code in this file. If you have any problems please contact Tidio RWD help center.