Using echoice Affiliate Tools

Size: px

Start display at page:

Download "Using echoice Affiliate Tools"

Leslie Dalton
6 years ago
Views:

Using echoice Affiliate Tools echoice Affiliate Enquiry Form Short Form To add the Affiliate Enquiry Form, simply access the embedded code in: http://www.

1 Using echoice Affiliate Tools echoice Affiliate Enquiry Form Short Form To add the Affiliate Enquiry Form, simply access the embedded code in: The Enquiry form can be embedded into an external HTML file or through a Wordpress page.

2 Adding echoice Affilate Enquiry Form in a HTML file To add the Enquiry Form on an HTML file, simply copy and paste the code from the affiliate site. Step1. Open your HTML file using the editor of your choice.

3 Step2. Copy the Enquiry form code from the affiliate site

4 Step 3. Paste this to the HTML file

5 Step 4. Open the HTML file in a browser to test if the form will be loaded Configuring the Enquiry Form Use CSS to change the style of the form. For flexibility in changing the form style, rename the form with a unique ID specifically for its use. To do this, change the value of both anchor and div id inside the form s script. Note: Make sure the anchor value and div id values are the same otherwise, the form will not load. Configuring the Thank You Page

6 A custom thank you page can be configured for the form to load once a successful enquiry has been established. To do this, create a custom thank you page containing the details you want to show after the user submits the enquiry. Reference this page in the form enquiry HTML Note: Make sure to supply the correct link/url of the thank you page e.g. etc. otherwise, the form will not be able to locate it and will display a Page not found error.

7 Adding echoice Affilate Enquiry Form in a Wordpress page To embed the Enquiry form in a Wordpress page, simply create a new page or locate the page where you would like to insert the form and press Edit page. Select HTML from the Wordpress built in editor.

8 Copy and paste the enquiry form code from the affiliate site and paste it in the editor.

9 Press Update to apply the changes.

10 Clicking View Page should be able to load the form

11 Configuring the Enquiry Form You could apply custom css to the form by referencing the ID given to it when it was embedded into Wordpress. To change this, simply edit the ID supplied in the embedded code. In Wordpress, select the page where the enquiry form has been embedded and press Edit Page. Make sure that the selected editor is HTML and change the ID of the enquiry form to the ID that will be used.

12 Configuring the Thank You Page To define a custom Thank you page, simply supply the link of the thank you page that you want the form to redirect to when a successful entry has been established. Note: The URL to be supplied as the thank you page should be a valid and existing page.

echoice Enquiry Micro Form The same steps used on the Short form can be followed when adding the Micro form to an external HTML or to a wordpress page. The embedded code is available in: http://www.

13 echoice Enquiry Micro Form The same steps used on the Short form can be followed when adding the Micro form to an external HTML or to a wordpress page. The embedded code is available in: under echoice Enquiry Micro Form section. Copy and paste the code there to your page where you want to have the Micro form. For the micro form to work, some configurations are need to be properly setup. Below are the specific configurations needed for the micro form to load properly. Please check the values of the below configurations if the page encountered a problem loading the micro form.

14 ff_dynamic_loader_enqform The short form uses ff_dynamic_loader for its configurations, while the micro form uses ff_dynamic_loader_enqform. micro: true, The form could exist with other affiliate tools such as the comparison table. Use the above setting (under ff_dynamic_loader_enqform) to avoid conflicts with other affiliate tools. var source_domain = ' source_domain should be added as the address where the enquiry forms are being called. product_name : carloan; Product name can be added to allow affiliates to send out specific enquiry types. This configuration is optional. Available product names that can be used are bikeloan, boatloan, carloan and personalloan. ffef.src = source_domain + '/resources/forms/enquiryshort/?settings=ff_dynamic_loader_enqform'; The above line contains the call to the enquiry form service. anchor: 'ff_enquiry_micro_form_sample', and <div id="ff_enquiry_micro_form_sample"></div> The anchor configuration is used to determine the id/name where the micro form will be placed on the page. It will look for the div which has the same name declared on the page so make sure that both anchor and the div have the same name configured.

15 If the configurations are correct, your page should be able to load the micro form. Removing Micro Form Elements Removing Yes! I am interested in the echoice Lenders Special tickbox The Micro form can be configured to display only specific set of fields. To remove the micro form element Yes! I am interested in the echoice Lenders Special simply add the below configuration under ff_dynamic_loader_enqform: remove_element : 'ff_enquiry_short_lenderspecial', Applying the above code will remove the tick box as seen below:

16 echoice Enquiry Long Form (tabbed) A tabbed version of the echoice enquiry long form can be added to a wordpress site as well as on a plain HTML page just like the short and micro forms. The embedded code can be copied and pasted from: under echoice Enquiry Long Form section. Select the code snippet there and paste it on the page where you want to include the Long form.

17 You can also copy and paste the below code to be able to access the long form: <script type="text/javascript">// <![CDATA[ //--><![CDATA[//><! // ]]></script>  <div id="ff_enquiry_long_sample"></div>

18 Follow the below configurations to ensure that the long form will work on the page that it will be included. var source_domain=' source_domain is a required variable and should always be added on top of the long form call as this is where the code is being hosted. ff_dynamic_loader_enqformlong Use this specific value to avoid conflicts when including other enquiry forms on the page. anchor: 'ff_enquiry_long_form_sample', Remember to use a value for the anchor that is specific to the long form by adding a unique identifier to it e.g. aff_long_form etc. (ff_enquiry_long_form_sample is used for this documentation) to avoid conflicts. aff_code: 'A1979', Add a custom tracker to the embedded form by using this configuration. style: 'tabbed', theme : 'echoice' Custom styles and themes can be applied to the long form using these variables. NOTE: The default style and theme currently available for the enquiry long form is the one used by echoice. Don t forget to add these variables when you include the long form. To apply custom styles to it (other than the default), directly apply it using CSS that the page uses targeting the long form elements directly. ffef.src=source_domain+'/resources/forms/enquiry-longform/?settings=ff_dynamic_loader_enqformlong';

19 Use the above code to call the long form. Note that this should not be confused with the short and micro form calls as they look the same. Also the value for settings param should be equal to ff_dynamic_loader_enqformlong the same as value added initially to the long form call (this is to avoid conflicts and errors with other enquiry forms). anchor: 'ff_enquiry_long_form_sample' and <div id="ff_enquiry_long_form_sample"></div> The anchor configuration is used to determine where the long form will be loaded on the page. It will look for the div which name is the same as the one declared as anchor so make sure that both of these variable are the same. If the configurations are correct, the page should include the form as shown below:

20 echoice Affiliate Calculators There are seven affiliate calculators that can be embedded. They are Borrow, Loan Comparison, Loan Repayments, Extra Repayments, Where Can I Buy, Stamp Duty, and Budget Planner calculators. Embedding The Affiliate Calculators The affiliate calculator code snippets can be copied and pasted to an existing page as plain HTML or embedded inside wordpress pages. Copy and paste the code below to make them available on the page: Borrow <script type="text/javascript">// <![CDATA[ //--><![CDATA[//><! // ]]></script> <div id="borrow"></div> The above snippet should generate the calculator below:

$au'; (function() { ff_dynamic_loader_calculator_compare = { anchor: 'loan-comparison', aff_code: 'A111', ef_thankyou_page: '/thank-you' }; // Create the javascript inclusion object var ffef =$

21 Loan Comparison <script type="text/javascript">// <![CDATA[ //--><![CDATA[//><! // ]]></script> <div id="loan-comparison"></div> The above snippet should generate the calculator below:

$au'; (function() { ff_dynamic_loader_calculator_repayments = { anchor: 'loan-repayments', aff_code: 'A111', ef_thankyou_page: '/thank-you' }; // Create the javascript inclusion object var ffef =$

22 Loan Repayments <script type="text/javascript">// <![CDATA[ //--><![CDATA[//><! // ]]></script> <div id="loan-repayments"></div> The above snippet should generate the calculator below:

$au'; (function() { ff_dynamic_loader_calculator_extrarepayments = { anchor: 'extra-repayments', aff_code: 'A111', ef_thankyou_page: '/thank-you' }; // Create the javascript inclusion object var ffef$

23 Extra Repayments <script type="text/javascript">// <![CDATA[ //--><![CDATA[//><! // ]]></script> <div id="extra-repayments"></div> The above snippet should generate the calculator below:

$au'; (function() { ff_dynamic_loader_calculator_where = { anchor: 'where', aff_code: 'A111', ef_thankyou_page: '/thank-you' }; // Create the javascript inclusion object var ffef = document.$

24 Where Can I Buy <script type="text/javascript">// <![CDATA[ //--><![CDATA[//><! // ]]></script> <div id="where"></div> The above snippet should generate the calculator below:

$au'; (function() { ff_dynamic_loader_calculator_duty = { anchor: 'duty', aff_code: 'A111', ef_thankyou_page: '/thank-you' }; // Create the javascript inclusion object var ffef = document.$

25 Stamp Duty Calculator <script type="text/javascript">// <![CDATA[ //--><![CDATA[//><! // ]]></script> <div id="duty"></div> The above snippet should generate the calculator below:

$au'; (function() { ff_dynamic_loader_calculator_budget = { anchor: 'budget', aff_code: 'A111', ef_thankyou_page: '/thank-you' }; // Create the javascript inclusion object var ffef = document.$

26 Budget Planner <script type="text/javascript">// <![CDATA[ //--><![CDATA[//><! // ]]></script><div id="budget"></div> The above snippet should generate the calculator below:

27 Configuring the Affiliate Calculators Below are the configurations that can be applied to the embedded calculators: anchor: 'borrow', The anchor variable will be used by the script to determine where the calculator will be loaded on the page using the div with the same id as the anchor. For pages that would contain more that one type of calculator, make sure that the type of calculator matches the name of the anchor as well as the id of the div where it needs to be loaded. aff_code: 'A111', For marketing code tracking, use this and supply the necessary code that will be used for tracking.

echoice Affiliate Comparison Table To add the Affiliate Comparison Table, simply access the embedded code in: http://www.echoice.com.

28 echoice Affiliate Comparison Table To add the Affiliate Comparison Table, simply access the embedded code in: The Comparison Table can be embedded into an external HTML file or through a Wordpress page.

29 Adding echoice Affilate Comparison Table in a HTML file To add the Comparison Table on an HTML file, simply copy and paste the code from the affiliate site. Step1. Open your HTML file using the editor of your choice. Step2. Copy the Comparison Table code from the affiliate site

30 Step 3. Paste this to the HTML file

31 Step 4. Open the HTML file in a browser to test if the table will be loaded Configuring the Comparison Table Use CSS to change the style of the Comparison table. For flexibility in changing the style, rename the table with a unique ID specifically for its use. To do this, change the value of both anchor and div id inside the table s script. Note: Make sure the anchor and div id values are the same otherwise, the table will not load.

Configuring the Thank You Page for the Comparison Table The Comparison table has the Enquire feature where it would load the enquiry form in the page; this form can have a custom thank you page.

32 Configuring the Thank You Page for the Comparison Table The Comparison table has the Enquire feature where it would load the enquiry form in the page; this form can have a custom thank you page. To add a custom thank you page, simply change the value on ef_thankyou_page to the link/url of the custom thank you page. Note: Make sure to supply the correct and valid URL of the thank you page otherwise, the form will not be able to locate it and will display a Page not found error.

33 Adding echoice Affilate Comparison Table in a Wordpress page To embed the Comparison Table in a Wordpress page, simply create a new page or locate the page where you would like to insert the table and press Edit page. Select HTML from the Wordpress built in editor. Copy and paste the comparison table code from the affiliate site and paste it in the editor.

34 Press Update to apply the changes. Clicking View Page should be able to load the table.

Configuring the Comparison Table You could apply custom css to the comparison table by referencing the ID given to it when it was embedded in Wordpress.

35 Configuring the Comparison Table You could apply custom css to the comparison table by referencing the ID given to it when it was embedded in Wordpress. To change this, simply edit the ID supplied in the embedded code. In Wordpress, select the page where the comparison has been embedded and press Edit Page. Make sure that the selected editor is HTML and change the ID of the comparison table to the ID that will be used.

Configuring the Thank You Page To define a custom Thank you page for the Comparison Table Enquire feature, simply supply the link of the thank you page that you want the form to redirect to when a

36 Configuring the Thank You Page To define a custom Thank you page for the Comparison Table Enquire feature, simply supply the link of the thank you page that you want the form to redirect to when a successful entry has been established. Note: Make sure to supply the correct and valid URL of the thank you page otherwise, the form will not be able to locate it and will display a Page not found error.

37 Firstfolio Get The Real Picture (GTRP) Form Paste the below code to attach the GTRP form in your website or Wordpress page.  <script type="text/javascript">// <![CDATA[ //--><![CDATA[//><! // ]]></script>  <div id="gtrp"></div>

38 Configuring the GTRP Form Below are the specific configurations needed for the GTRP to load properly. Please check the values of the below configurations if the page encountered problems loading the form. ff_dynamic_loader_gtrp The GTRP form uses this function name to load the form. The form could also exist with other affiliate tools such as the micro, short and long form. Use the above function name to avoid conflicts with other affiliate tools. ffef.src = namic_loader_gtrp The above line contains the call to the form service. Make sure the above value is correct if ever there are problems causing the form to load. anchor: 'gtrp, and <div id="gtrp"></div> The anchor configuration is used to determine the id/name where the GTRP form will be placed in the page. It will look for the div which has the same name declared so make sure that both anchor and the div have the same name configured.

39 The GTRP form when configured correctly, will be loaded as below: CSS can be applied to configure the form. It can be customized to have the same look and feel of the site where it is embedded by either directly applying CSS to the form within your site s CSS library or by using embedded CSS style before the <div> where the form will be attached. <style type="text/css"> /** Apply GTRP form styles here **/ #gtrp {... } </style> <div id="gtrp"></div> Note: See Affiliate Tools Known Issues for details of issues when applying CSS to forms.

40 Affiliate Tools Known Issues See below known issues to be considered when adding echoice affiliate tools on your website. Javascript The affiliate tools rely heavily on Javascript particularly jquery. Any Javascript errors encountered during page load will prevent the tools to load correctly. Ensure that there are no Javascript errors within any scripts used in the page where the affiliate tools will be included. Note:A web developer tool (Chrome/Firefox/IE) can be used to check whether there are javascript errors in a page. jquery Libraries Because the affiliate tools use jquery to load its components, any conflicts with jquery and its libraries will cause issues. Although there are built-in scripts within the tool to switch needed libraries, there are certain versions of jquery specifically old versions that can still cause conflicts with the ones that the tools use. CSS Note that CSS added within the page that contains general rules set for generic HTML components will have an impact on the tools default layout. Example of CSS rules that may cause layout issues: input, select { } border: 1px solid blue; padding: 20px; To resolve these issues, custom CSS must be applied. These will overwrite those unwanted CSS rules that are being applied to the affiliate tools. These CSS must be added after any CSS that the page is using. Alternatively, you can embed a <style> tag containing these CSS fixes just before the <div> that will contain the tool. Ex: <style> /* apply your CSS fix here */ #echoice-long-form-tool input,#echoice-long-form-tool select {padding: 0px!important;} </style>  <div id= echoice-long-form-tool ></div>

41 echoice Affiliate Tools on Mobile Devices The current version of the affiliate tools is not yet optimized for mobile devices. It is common for web pages to use bootstrap.min.css ( to make the site optimized for mobile devices however, this could also cause issues with the affiliate tools. See the above details about CSS known issues on how to resolve this.

CIW 1D CIW JavaScript Specialist.

CIW 1D CIW JavaScript Specialist. CIW 1D0-635 CIW JavaScript Specialist http://killexams.com/exam-detail/1d0-635 Answer: A QUESTION: 51 Jane has created a file with commonly used JavaScript functions and saved it as "allfunctions.js" in