@empathyco/x-components

[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [XInstaller](./x-components.xinstaller.md) ## XInstaller class The purpose of this class is to offer a quick way to initialize the XComponents in a setup project. It allows to receive all the options in [InstallXOptions](./x-components.installxoptions.md) which is an extension of [XPluginOptions](./x-components.xpluginoptions.md) with all the options for the plugin and some options more. This class does multiple things: 1. Install the [XPlugin](./x-components.xplugin.md) with the [XPluginOptions](./x-components.xpluginoptions.md). 2. Creates the public [XAPI](./x-components.xapi.md) and add it to global window. 3. Creates the Vue Application for the customer project. The steps 2 & 3 are optional and depends on the options passed in [InstallXOptions](./x-components.installxoptions.md). **Signature:** ```typescript export declare class XInstaller ``` ## Example The way to use this class is the next: 1. Create the installer passing in the [InstallXOptions](./x-components.installxoptions.md). This only save the options: ``` const installer = new XInstaller(installXOptions) ``` 2. Initialize passing the [SnippetConfig](./x-components.snippetconfig.md). This installs the plugin and creates the App. There are 3 different ways to do this: 2.1 Using the created installer: ``` installer.init(snippetConfig) ``` 2.2 If the API option is enabled (`createAPI` is `true` in [InstallXOptions](./x-components.installxoptions.md), or is not present as the default value is `true`) then this init step can be done with the Public API: ``` window.InterfaceX.init(snippetConfig) ``` 2.3 When the script of the project build is loaded it searches for a global `initX` variable that the customer must have in their website. This variable can be a function that returns the [SnippetConfig](./x-components.snippetconfig.md) or an object that contains the [SnippetConfig](./x-components.snippetconfig.md) itself: ``` window.initX = function() { return { instance, env, scope, lang, uiLang, currency, consent, documentDirection }; }; ``` ``` window.initX = { instance, env, scope, lang, uiLang, currency, consent, documentDirection }; ``` ## Constructors <table><thead><tr><th> Constructor </th><th> Modifiers </th><th> Description </th></tr></thead> <tbody><tr><td> [(constructor)(options)](./x-components.xinstaller._constructor_.md) </td><td> </td><td> Receives the [InstallXOptions](./x-components.installxoptions.md) and merges it with the default fallback options. Also creates the public [XAPI](./x-components.xapi.md). </td></tr> </tbody></table> ## Properties <table><thead><tr><th> Property </th><th> Modifiers </th><th> Type </th><th> Description </th></tr></thead> <tbody><tr><td> [options](./x-components.xinstaller.options.md) </td><td> `protected` `readonly` </td><td> [InstallXOptions](./x-components.installxoptions.md) </td><td> </td></tr> </tbody></table> ## Methods <table><thead><tr><th> Method </th><th> Modifiers </th><th> Description </th></tr></thead> <tbody><tr><td> [getSnippetConfig()](./x-components.xinstaller.getsnippetconfig.md) </td><td> `protected` </td><td> Getter for the snippet config object. </td></tr> <tr><td> [init(snippetConfig)](./x-components.xinstaller.init.md) </td><td> </td><td> Receives the [snippet config](./x-components.snippetconfig.md) or retrieves it from window.initX and installs the plugin and initializes the Vue application. </td></tr> <tr><td> [init()](./x-components.xinstaller.init_1.md) </td><td> </td><td> </td></tr> <tr><td> [normaliseSnippetConfig(snippetConfig)](./x-components.xinstaller.normalisesnippetconfig.md) </td><td> `protected` </td><td> </td></tr> <tr><td> [normaliseSnippetConfig(snippetConfig)](./x-components.xinstaller.normalisesnippetconfig_1.md) </td><td> `protected` </td><td> </td></tr> </tbody></table>