Form Guide Widget
This document provides instructions on how to integrate Touch-Line's Form Guide Widget into your web page.
The solution has been developed to be as easy to implement as possible but should you have any questions after reading this documentation please feel free to contact us.
Before attempting to use this service we will need to whitelist any domains that you intend to use the widget on including test domains.
To integrate the Form Guide Widget you must include the javascript used to generate the content in your web page. Please place the following markup inside your page preferably in the html head tag :
<script type="text/javascript" src="https://formguide.touch-line.com/js/init.js" async="async"></script>
This javascript file handles the generation of the content automatically so all you need to do is include the correct HTML markup for the widget parent container in your page.
The parent container must be placed as a div on your page with a class equal to "tlds_form_guide".
<div class="tlds_form_guide"></div>
We will also supply you with a client code for your site and this must be included as a data attribute in the div. This will ensure that you get styling tailored to your site brand.
<div class="tlds_form_guide" data-site="####"></div>
This is the basic code needed to integrate the service into your page. The content loaded is fully responsive, automatically adjusting to the width and height of the parent container. If no height is specified for your parent container the widget will automatically display at an optimum height relative to the width.
Single Page Applications
If you are integrating our content into a single page application and are planning on placing the container div dynamically, via client side javascript after the page has loaded, then you will need to call a javascript function to load our content. This is in addition to the instructions already outlined above. The function call is :
tlds.form_guide.init();
This function call should be made after you have loaded our javascript and and dynamically placed the container div.
Reference
The full set of customisation attributes for the Form Guide Widget are listed below :
| Attribute | Description | Values |
|---|---|---|
| data-site | This is your unique client id which will be supplied by us to ensure you get the correct style and branding applied to the content. | #### |
| data-feed | This is a unique id (provided by us) for identifying a bookmakers sportsbook feed from which betting prices will be used in the widget. This can also be used in conjunction with the data-event attribute to allow you to load a specific event using the event id from the sportsbook feed. | #### |
| data-event | This must be used in conjuntion with the data-feed attribute and allows you to load a specific event by default using the sportsbook feed event id. | #### |
| data-odds | Specifies whether match result betting odds should be displayed for events. | yes (default) no |
| data-odds-type | Specifies the format betting odds should be displayed in. | decimal (default) fractional |
| data-match-selector | Specifies whether the match selector should be displayed. You should only select no if you are selecting a specific match with the data-event attribute whereby you will get a match header instead. | yes (default) no |
| data-header | Allows for the removal of the main data header (match selector / match header) if you just want the graph for a speciic match and you already have your own header above the content in your article. | yes (default) no |
| data-footer | Allows for the removal of the widget footer containing the form calculation explanation. | yes (default) no |
| data-share | You can use this attribute if you want the widget to include buttons for sharing on twitter, facebook or by email. The value of this attribute should be the URL of the page on your site that you want to share which also includes the widget. | URL |
| data-match | This attribute is used for deep linking when using the sharing buttons detailed above with the "data-share" attribute. A querystring will be appended to the URL (maid=###). You should take the value of this querystring parameter and place it in the data-match attribute so that the correct match is shown that was originally shared. | #### |