This guide outlines the main steps that you need to follow in order to integrate and configure WebSpellChecker Proofreader with a new auto-searching functionality. All the described steps are provided for the Cloud version of WebSpellChecker Proofreader.
0. Obtain Service ID
Sign up for the trial version to get started with WProofreader Cloud. Once you have subscribed, you will receive an email with your service ID, an activation key, required for the WProofreader service activation. If you already have one, you can skip this step.
1. Initialize WSC Proofreader with 'autoSearch'
There are two approaches for initializing WSC Proofreader in your web app: using the variable config or inline data attributes.
Option A. Initializing using Variable Config
1. Set Service Path
Add the wscbundle.js script on your web page.<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>
2. Define Configuration of Proofreader with 'autoSearch'
Define the required configuration options in WEBSPELLCHECKER_CONFIG. Required options for the WProofreader Cloud: This is an example of the defining WEBSPELLCHECKER_CONFIG in a separate script directly on a web page. Alternatively, you can create a *.js file (e.g. wscbundle_config.js) with WEBSPELLCHECKER_CONFIG on your end and then load it from the file on your web page as shown in example below. This is an example of the wscbundle_config.js file with WEBSPELLCHECKER_CONFIG. Here is an example of the script that you need to add on your web page with the path to wscbundle_config.js.<script>
window.WEBSPELLCHECKER_CONFIG = {
autoSearch: true,
lang: 'auto', // set the default language
serviceId: 'your-service-ID' // the activation key for the Cloud-based version
};
</script>
window.WEBSPELLCHECKER_CONFIG = {
autoSearch: true,
lang: 'en_US',
serviceId: 'your-service-ID'
};
<script type="text/javascript" src="[path_to_config]/wscbundle_config.js"></script>
Option B. Initializing using Inline Data Attributes
In general, the initialization of WSC Proofreader using inline attributes is a good option if you want to have a single script with the base options.
<script data-wsc-serviceid="your-service-ID" data-wsc-autosearch="true" data-wsc-lang="en_US" data-wsc-enableGrammar="true" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"> </script>
In order to define an additional option as an inline data attribute, use 'date-wsc-option_name', e.g. 'data-wsc-lang'. You can find the full list of options available here.
There is a limitation which must be taken into account when using inline data attributes for the WSC Proofreader options. As for now, only options which have boolean or string types can be used as data attributes. The options with array or number type are not supported (e.g. actionItems, suggestionsCount, moreSuggestionsCount).
Check a demo page with WebSpellChecker Proofreader on our website.