NLX Widget Sample HTML

# Video modality ## **What's a *****Modality*****?** A modality allows for information to be transmitted to a user that goes beyond a standard message. Images, audio, structured text, haptic signals, videos, and more can be modalities you may want to provide users during conversation. In chat applications, videos are useful for providing users with rich visual information that can explain, demonstrate, or enhance a user's search. *** ## Checklist You'll complete the following to successfully use a custom video modality: * [ ] Create modality * [ ] Create flow * [ ] Deploy * [ ] Install *** ## Step 1: Create modality {% hint style="success" %} Est. time to complete: \~1 minute {% endhint %} * Select *Resources* from workspace menu > Choose *Modalities* * Select *New modality* * Enter "Video" as the name name * Select *Schema* and change the *Type* to *Object* * Select *Properties* and then *+ Add property* * Enter "src" as the *Field name* * Click *Create modality* *** ## Step 2: Create flow {% hint style="success" %} Est. time to complete: \~3 minutes {% endhint %} You'll now enable the video modality you created on an end node and provide it with a video URL: * Select *Resources* from workspace menu > Choose *Flows* > Click *New flow* or choose existing * Click on any end node (a [user-type node](/platform/nlx-platform-guide/flows-and-building-blocks/overview/nodes.md#user-choice) or node that is unconnected thereafter) > Select *Add functionality* > Choose *Modalities* * Toggle *Enable* on the *Video* modality you created in the previous step * Enter `dQw4w9WgXcQ` as the value for "src" * Click *Save* Repeat for any other flows where you would like to enable your video modality. 🧠 Looking for more? See [Flows](/platform/nlx-platform-guide/flows-and-building-blocks/overview.md) *** ## Step 3: Deploy {% hint style="success" %} Est. time to complete: \~2 minutes {% endhint %} * Select *Applications* from workspace menu > Choose *New application* > Select *Custom* > Provide a name * Under the *Functionality* section of your app's *Configuration* tab, attach the `ExampleCarouselFlow` * Select *Default behavior* > Assign any attached flows to the application's behaviors * From the *Delivery* section > Select *API* channel > Whitelist your webpage's URL * Click *Update channel* > *Click* Save A build now constructs a package of your application with a snapshot of current state of flows, languages, and application setup. A deployment then pushes a successful build to the communication channels where your app is installed: * Click deployment status in upper right > Select *Build and deploy* * Review [*Validation check*](#validation-check) for critical errors or detected UX issues in custom flows. Before each new build initiates, a validation check is run to provide a preview of potential errors that may cause failed builds. Detected issues are listed with descriptions and potential solutions * You may provide a *Description* of notable build edits as a changelog * Click *Create build* * Click deployment status in upper right > Select *All builds* > Choose *Deploy* on successful build > Click *Create deployment* *** ## Step 4: Install {% hint style="success" %} Est. time to complete: \~5 minutes {% endhint %} You can quickly build an HTML page to test out your video modality. * From your application's *Configuration* tab in NLX, click the API channel * Select the *Setup instructions* tab in the modal > Save your *Application URL* and *API Key* * Copy the HTML file below and replace `REPLACE_WITH_APPLICATION_URL` and `REPLACE_WITH_API_KEY` with the values you just copied * Save the HTML file you just edited and serve the HTML file with your preferred command line tool such as [serve](https://www.npmjs.com/package/serve) ```html NLX Widget Sample HTML ``` *** ## Step 5: Test To test the modality, either host your HTML file or serve it locally using a command line tool like [serve](https://www.npmjs.com/package/serve). Once you can access the page, click on the NLX widget at the bottom right of the page and converse with your application until you reach the node in the conversation where the video modality is set. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.nlx.ai/platform/nlx-platform-guide/flows-and-building-blocks/advanced/touchpoint-modalities/video-modality.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.