Lexicon Search Widget

Add the Lexicon search widget to your blog or website and enable your readers to search for financial terms and definitions. The Lexicon is a glossary of more than 10,000 financial terms, with content being added by FT journalists on a daily basis

Try it for yourself

Adding the Widget

The widget is easy to implement and customise. To integrate with your web page, just follow the steps listed below:

To add the widget to a webpage, copy and paste the following section of code:

<script type="text/javascript"> var lexiconBGColor = '0xFFFFFF'; var lexiconWidth = '100%';</script>
<script src="http://lexicon.ft.com/widget/embedFTLexicon.js" type="text/javascript"></script>

into a <div> tag or other appropriate section of code (as shown below).

<div id="sidebar">
<script type="text/javascript"> var lexiconBGColor = '0xFFFFFF'; var lexiconWidth = '100%';</script>
<script src="http://lexicon.ft.com/widget/embedFTLexicon.js" type="text/javascript"></script>
</div>

Customizing the Widget

Background Color

The background colour of the widget is editable. Select a colour from the options below and set as the value for lexiconBGColor. The colour may also be set to one in your websites style sheets.

<!--end #header --></div>
<div id="sidebar">
<script type="text/javascript"> var lexiconBGColor = '0xFFFFFF'; var lexiconWidth = '100%';</script>
<script src="http://lexicon.ft.com/widget/embedFTLexicon.js" type="text/javascript"></script>
</div>
<!--end #sideBar1 --></div>

Colour options include the following:

0xFFFFFF
0xEEEEEE
0xFFFFED
0xFFF1E0
0xECF4FD
0xE7E2D7
Size

The height of the lexicon widget is hardcoded to 285 pixels. The width of the widget automatically adjusts to the width of the column set in the Cascading Style Sheet. In the example of a CSS below, the width of the column is set to 220pixels. In the HTML example that follows, the width of the widget is set to 100% of the width of the column.

CSS Example
.twoColFixRtHdr #sidebar1 {
      float: right /*since this element is floated, a width must be given*/
      width: 220px;
      background: 0xFFFFFF;
      padding: 15px 0; /*15px 10px (removed side padding)*/
}
HTML example

The LexiconWidth value may be edited to <X>; of the column width, or it may be set to a specific pixel width which will override the CSS.

<!--end #header --></div>
<div id="sidebar">
<script type="text/javascript"> var lexiconBGColor = '0xFFFFFF'; var lexiconWidth = '100%';</script>

<script src="http://lexicon.ft.com/widget/embedFTLexicon.js" type="text/javascript"></script>
<!--end #sideBar1 --></div>

What do you think?

Are there any missing configuration options or would you like to request a feature? Let us know

Toolbox

Lexicon on Twitter