WIDGET CONTROL PANEL

Document History Version

Date

Author

Comment

1.0

08/07/2015

NImrod

Original Version

1.1

13/10/2015

Ronen

Additional information after meni

Table of Contents Introduction .............................................................................................................................. 3 Basic roles to follow up: .......................................................................................................... 3 Login Details:.......................................................................................................................... 3 Wordpress CRM Integration .................................................................................................... 4 Widget ....................................................................................................................................... 4 General .................................................................................................................................. 4 Step1- Snippet code ............................................................................................................... 4 Step2- Content ....................................................................................................................... 5 Input Types: ........................................................................................................................ 6 Step3- Logic ........................................................................................................................... 8 Default logic ........................................................................................................................ 8 Custom logic ....................................................................................................................... 9 Block UI .............................................................................................................................. 9 Advanced Topics .................................................................................................................... 9 Css ....................................................................................................................................10 Javasxript...........................................................................................................................13 Place holders .....................................................................................................................15 Trade Account list (http://knockoutjs.com/) .........................................................................16 Error codes..............................................................................................................................17 General .................................................................................................................................17 Set error code........................................................................................................................17 Feeds .......................................................................................................................................18 Structure................................................................................................................................18 Feeds Run .........................................................................................................................19 Feeds table (http://knockoutjs.com/)...................................................................................19 Signal feed (http://knockoutjs.com/) ...................................................................................20 Chart ..................................................................................................................................21 TOOLS .....................................................................................................................................22

1. Introduction This Document will describe how to login, implement and customize your site built in WordPress with the CRM and Meta trader using .NET widgets from the server settings panel. 1.1. Basic roles to follow up 1. We will use extensive cache options (CDN) take into consideration only widgets will get to server side All HTML, CSS, images, JavaScript will use CDN. 2. Use as less as possible WordPress plugins if you must use very popular ones 3. Use pages and not posts 4. Use templates 5. The sites are operated as multisite (same code ,different content) but each site can be different in look and feel. 1.2. Login Details: You will receive the login details for WordPress and Server Settings Panel (Widget backend).After login a menu will appear having these options:

Widget- Forms Manager for Content and Logic Error Code- Managing site’s error messages Support-support information

2. WordPress CRM Integration For Integrating Wordpress with the CRM, please add: var siteOrganization="sitename"; // without www or .com var siteConfiguration = "1" // 1 is pci compliant , 0 isnt pci compliant var siteLanguage = "en"; // any supported language , this is default var siteCurrentPage = ""; Note: this script must appear on every page of your site

3. Widget 3.1. General Widget presents form tag, in this backend you have the ability to manage the forms fields, labels and logic of your form. 3.2. Step1- Snippet code You have to paste the snippet code in the Word Press (WP) .This action will create new form with all fields and with a connection to CRM and MT. in the CSS you can design the form.

 Don’t add any tags of your own around these forms – they will stop to work  

Please notice that you are on the right language on the language tab Don't edit the snippet code

3.3. Step2- Content

3.3.1. Input Types:    

Text-string Check box List- selection box. (Don’t add values without inform us. We must add it first to CRM. ) HTML-put html data (pictures, links)

3.3.2. Html editor

 

Error code Tab index Stage Visible

The same widget can appear several times on a page For every language you have to edit content only once and then paste the snippet code in every page you would like it to appear. The design will be done in the WP. The class name will be always the same.

What error number will be returned from number error codes list when error validation happens Change the order of the fields When there is more than one step , on what step the field appears When unchecked , Removes this feild from the widget, (it will not appear on the form on the site), if you want to give default value hide it with CSS and set it on JavaScript

3.3.3. Step3- Logic 3.3.3.1.

Default logic

There is default logic for all the widgets, and each widget can have its own unique additional logic options.

Explain Widget Message General Error On The Server Submit Action Submit Action Success URL Upon Page Request Upon Page Request URL

General explanation of the page, you can decide if it will be permanent or float Using CSS General error on the server. There are Widget that have more than one error Expected action from the form upon submission Success page URL to redirect the client after submitting the form ,can be relative (/success) Set the logic the site should execute upon client request the page having this widget. (example: user asks for deposit page when he is logout, we want redirect him to login page) Page to redirect the client, when he asks for the page (widget) that not Incompatible with the process

3.3.3.2.

Custom logic

For example Thanks processing URL- thank you page path. When there is an error but we got the client data or when the data already exists in CRM, we want to redirect the user to another thank you page, because we can’t present the trade account info

3.3.3.3.

Block UI

After the client hits on submit .you can put text or picture. Another function it plays, it prevent from hitting several times on the submit button.

When this is not required you can just remove the txt or use CSS to hide it

3.3.4.

Advanced Topics

The widgets are not implemented using iframes, so you have the ability to design and change behavior for them using CSS and JavaScript:

3.3.4.1. CSS You can add code to the WordPress style.css for the widgets /* after submit*/ .formSubmitedLc { opacity: 0.1; } /* before the widget appears*/ .loaderAnimatedLc{ display: inline-block; background-image: url('http://i.stack.imgur.com/MnyxU.gif'); min-height: 149px; min-width: 270px; background-repeat: no-repeat; background-position-x: 0px; background-position-y: 0px; } /* Block Ui on submit show text/image*/ .ClField-Block_Ui_Message.BlockUiWrapper { position: relative; width: 100%; top: -90px; }

.BlockUiWrapper .LcContent { width: 150px; min-height: 50px; display: block; margin: 0 auto; }

/* error validation Field */ .errorFieldLc { border: 1px solid red !important; background-image: url('http://www.randelshofer.ch/tinylms/testlog/smallwarning.gif') !important; background-position-x: 164px; background-repeat: no-repeat; background-position-y: 5px; }

input[type="checkbox"].errorFieldLc { outline: 1px solid #F00; } /* Field is validation */ .vaildFieldLc { background-image: url('http://www.biosolveit.de/images/icons/16px/quill3.png') !important; background-position-x: 164px; background-repeat: no-repeat; background-position-y: 5px; border: 1px solid blue !important; } /* quick edit the widget from the wordpress*/ a.editWidget { display: none; }

/* pop up */ /* pop up email exist*/ ClField-IsEmailExistsPopup.PopUpWrapper .EmailExistsPopup ,.FinancialPopup,.BlockByCountryPopup { background: rgb(208, 202, 211); padding: 20px; }

.FinancialPopup,.BlockByCountryPopup { background: rgb(208, 202, 211); padding: 20px; }

/* pop up email exist*/ .ClField-IsEmailExistsPopup.PopUpWrapper .EmailExistsPopup { background: rgb(208, 202, 211); padding: 20px; }

/* pop up Block Country */ .FinancialPopup,.BlockByCountryPopup { background: rgb(208, 202, 211); padding: 20px; }

You can hide/show html tags, according to the user status: (LcIsLogin , LcIsIsreal , LcIsDeposit)