1) Obtain a Google Developer API Key
Google API Key's are created at the Google Developer Overview. It is a quick and painless setup using your Google Account. They will email you the key, which you then use in Step 2.
2) Register with ProperSpell
Using your Google API Key, fill in the form and register to generate your ProperSpell key and code. Your ProperSpell key will be emailed to you.
Too Many Login Attempts
There have been too many unsuccessful login attempts from the IP Address 38.103.63.61. The system will temporarily block any further attempts originating from this IP. Please try to log in at a later time.
3) Setup Lucien on your site.
The following code has been generated specifically for your ProperSpell registration key . You can copy and paste this code into your existing web forms, and you should be ready to start using ProperSpell. Keep if you ever need to regenerate this custom code page.
Step A:
First, you need to define the form and search field with a unique 'name' attribute. The following code is for demonstrative purposes only and is not part of the Lucien code which you place on your site. In this example, the form is referenced as searchForm and the search field is referenced as searchField.
Step A code: Naming form elements.<form name="searchForm" method="POST" action="submit.html"> <input type="text" name="searchField" /> ...... </form>
Step B:
Next you need to download the file and include it in your web page. The include can be placed anywhere on the page, but makes most sense to place it near the form that it is going to binded with. You can place the downloaded file in any static location within your website directory.
Step B code: Include Lucien settings.<!-- includes the local Lucien settings file --> <script type="text/javascript" src="/path/to/lucien.js"></script>
Once you get familiar with the default configuration, there are some optional parameters, which are explained in detail in the Advanced Configuration section.
Step C:
On the page which has the search form, you then need to bind Lucien to the form and search field elements described above. The code below uses the example form name searchForm and search field searchField given in Step A.
Step C code: Bind Lucien to form.<!-- BEGIN LUCIEN BIND --> <script type="text/javascript"> // define the form to bind with __lucienFormName = "searchForm"; // define the form field to bind with __lucienTermName = "searchField"; </script> <!-- END LUCIEN BIND -->
Step D:
Once all those pieces are complete, Lucien is configured on your search form. The final piece is to configure the results page. First, you need to include your Lucien settings using Step B. Then you need to add the display area to your results page. This code can be placed anywhere within your results page, and will be where the spelling suggestion is displayed.
Step D code: Add suggestion display.<!-- creates Lucien results area --> <!-- can be placed anywhere on page --> <div id="lucienSuggestion" style="visibility: hidden"> </div>
If your results page contains a search form itself (similar to the Demo), you can simply add the Lucien binding code (Step C) to the that page as well. Once you have gotten this far, you should be able to query against ProperSpell and have search suggestions returned.
