{% extends "../../layout.twig" %}

{% set page_title = 'Options' %}
{% set page_slug = '/options/' %}


{% block page %}
    <h1 id="options">Options</h1>
    <p>Below is a list of possible options.</p>

    <table class="table options-table compact">
    	<thead>
    		<tr>
    			<th scope="col">Option</th>
    			<th scope="col">Type</th>
    			<th scope="col">Default</th>
    			<th scope="col">Description</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>formEl</td>
    			<td>HTMLFormElement</td>
    			<td></td>
    			<td>Required. The Form element.</td>
    		</tr>
    		<tr>
    			<td>context</td>
    			<td>HTMLElement</td>
    			<td>document.body</td>
    			<td>Context (HTMLElement) of where to append the ConversationalForm (see also cf-context attribute)</td>
    		</tr>
    		<tr>
    			<td>tags</td>
    			<td>Array</td>
    			<td></td>
    			<td>Pass in custom tags (when auto-instantiation of ConversationalForm is disabled)</td>
    		</tr>
    		<tr>
    			<td>dictionaryData</td>
    			<td>Object</td>
    			<td></td>
    			<td>Overwrite the default user Dictionary items</td>
    		</tr>
    		<tr>
    			<td>dictionaryRobot</td>
    			<td>boolean</td>
    			<td>true</td>
    			<td>Can be set to false to allow for loading and packaging of Conversational Form styles within a larger project.</td>
    		</tr>
            <tr>
                <td>userImage</td>
                <td>base64, image url or a string beginning with "text:" (eg. "text:JD") (max 3 characters)</td>
                <td></td>
                <td>Add a custom user image or short text string, without overwritting the user dictionary.</td>
            </tr>
            <tr>
                <td>robotImage</td>
                <td>base64, image url or a string beginning with "text:" (eg. "text:JD") (max 3 characters)</td>
                <td></td>
                <td>Add a custom robot image or short text string, without overwritting the robot dictionary.</td>
            </tr>
    		<tr>
    			<td>submitCallback</td>
    			<td>Object</td>
    			<td>void</td>
    			<td>Custom submit callback if button[type=submit] || form.submit() is not wanted.</td>
    		</tr>
    		<tr>
    			<td>loadExternalStyleSheet</td>
    			<td>boolean</td>
    			<td>true</td>
    			<td>If set to false, the default Conversational Form stylesheet will not be loaded.</td>
    		</tr>
    		<tr>
    			<td>preventAutoAppend</td>
    			<td>boolean</td>
    			<td>false</td>
    			<td>Start the form in your own time, {cf-instance}.start(), exclude cf-form from form tag.</td>
    		</tr>
    		<tr>
    			<td>preventAutoStart</td>
    			<td>boolean</td>
    			<td>false</td>
    			<td>Start the form in your own time, {cf-instance}.start(), exclude cf-form from form tag</td>
    		</tr>
			<tr>
    			<td>preventAutoFocus</td>
    			<td>boolean</td>
    			<td>false</td>
    			<td>Prevents the initial auto focus set on the UserInput.</td>
    		</tr>
    		<tr>
    			<td>scrollAccerlation</td>
    			<td>number</td>
    			<td>0.1</td>
    			<td>Optional horizontal scroll accerlation value, 0-1</td>
    		</tr>
    		<tr>
    			<td>flowStepCallback</td>
    			<td>Object</td>
    			<td>(dto: FlowDTO, success: () => void, error: () => void) => void</td>
    			<td>Allow for a global validation method, asyncronous, so a value can be validated through a server, call success() or error()</td>
    		</tr>
    		<tr>
    			<td>eventDispatcher</td>
    			<td>cf.EventDispatcher</td>
    			<td></td>
    			<td>Optional event dispatcher, has to be an instance of cf.EventDispatcher, see <a href="../events/">Events</a> for more info.</td>
    		</tr>
    		<tr>
    			<td>microphoneInput</td>
    			<td>IUserInput</td>
    			<td></td>
    			<td>Optional, set microphone input, future, add other custom inputs, ex. VR, see <a href="../functionality/voice/">voice-section</a> and examples.</td>
    		</tr>
			<tr>
    			<td>hideUserInputOnNoneTextInput</td>
    			<td>boolean</td>
    			<td>false</td>
    			<td>Optional, hide UserInputField when radio, checkbox, select input fields are active.</td>
    		</tr>
    		<tr>
    			<td>userInterfaceOptions</td>
    			<td>cf.UserInterfaceOptions</td>
    			<td></td>
    			<td>Optional, parameters for the User Interface of Conversational Form, set here to show thinking dots or not, set delay time in-between robot responses.</td>
    		</tr>
            <tr>
                <td>suppressLog</td>
                <td>Boolean</td>
                <td>true</td>
                <td>By default log messages form CF is suppressed. Set to true and get some additional info. Recommended for development.</td>
            </tr>
    	  </tbody>
    </table>

{% endblock %}