Complex modules are modules that have predefined uses and internal behaviors.

complex-template-page-languages

Any type of page module (predefined module containing the word "page") must be used to identify a page. This page is used for the language selection page.

In this code example. I have left the properties defined as they are in our AI Concierge.

The title and subtitle are title elements that may or may not be used. This is typically always in English as it is a language selection page.

languages determine which languages will be displayed. There is a built-in animation on the language icons. isIcon determines whether this icon exists or not. The id and data-id should be set to the appropriate language id.

config controls the rotation of the center text. This center text rotates through a message in the different languages. duration is the speed (in seconds) of the rotation animation. delay is the delay (in seconds) between rotations.

chooseLanguageRotation is a key/value pair where the key is the id of the language copy in rotation. The value is copy in rotation for that particular language.

Note: When a language is selected, the language to the Knowledge Base and the avatar are set. Then an event is fired EVENT_PAGE_HOME_BTN. This is the event that you will want to define a page for that will be triggered on language selection.

{
	"id": "complex-template-page-languages",
	"class": "my-class-name",
	"event": "EVENT_PAGE_LANGUAGES",
	"footer": "optional_footer_module",
	"title": {
		"copy": "I'm here to help.",
		"class": "l-title",
		"data": {
			"id": "title"
		}
	},
	"subtitle": {
		"copy": "Select a language to begin.",
		"class": "l-subtitle",
		"data": {
			"id": "subtitle"
		}
	},

	"languages": [
		{
			"copy": "English",
			"id": "_English",	
			"isIcon": true,				
			"data": {
				"id": "_English"
			}
			
		},

		{
			"copy": "French",
			"id": "_French",
			"isIcon": true,					
			"data": {
				"id": "_French"
			}
		}
	],

	"config": {
		"duration": 1.5,
		"delay": 3
	}, 

	"chooseLanguageRotation": {
		"_English": "Choose your<br>language to begin",
		"_French": "Choisissez votre<br>langue pour commencer"
	} 
}

complex-template-persistent-languages

This module is a module that appears on every page outside of the language page. It is an animated button that rotates in all of the language choices. When clicked, it takes the user back to the language page.

In this code example. I have left the properties defined as they are in our AI Concierge.

config controls the rotation of the text. This text rotates through a message in the different languages. duration is the speed (in seconds) of the rotation animation. delay is the delay (in seconds) between rotations.

chooseLanguageRotation is a key/value pair where the key is the id of the language copy in rotation. The value is copy in rotation for that particular language.

"m-persistent-languages": {
	"id": "complex-template-persistent-languages",
	"config": {
		"duration": 1.5,
		"delay": 2
	}, 
	"chooseLanguageRotation": {
		"_English": "Choose a language",
		"_French": "Choisissez une langue"
	} 
},

complex-interactive-panel

This is a module that is used for a microphone toggle. This module is displayed on every page outside of the language page.

"complex-interactive-panel": {
	"id": "complex-interactive-panel",
	"micToggle": {
		"copy": "Turn microphone on or off.",
		"data": {
			"lang-copy-id": "global_mic-toggle"
		}
	}
}