> For the complete documentation index, see [llms.txt](https://docs.feedloop.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.feedloop.ai/agent-utility/apps/web-app.md).

# Web App

## User Manual

### Getting Started

* **Logging In:** Access the Feedloop AI platform using your registered credentials.
* **Project Selection:** Choose the desired project from the project management section.

### App Listing

* **View Apps:** In the project dashboard, navigate to the "Apps" tab to view the list of deployed apps associated with the selected project.

### Creating a New App

* **Selecting Deployment Type:** Click on the "Add App" button to create a new app. Choose the deployment type (e.g., Chatbot App, Qore Integration, WA App).

<figure><img src="https://4292326968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqsAGx1GJXq13bQhP2sY7%2Fuploads%2FraF4PguP7SBl2Xf1wNkR%2FHealthcare.png?alt=media&amp;token=eebcec40-ee6e-44ad-96f7-8cfad551ae13" alt=""><figcaption></figcaption></figure>

### Info Apps

* **Info Apps**
  * Rename Apps Name : modify the name of the app to give it a personalized title.
  * Description Apps:  description or summary of the app, providing additional information about its purpose or functionality.

<figure><img src="https://4292326968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqsAGx1GJXq13bQhP2sY7%2Fuploads%2Fkd4ES6Dg39izdAIAv8v8%2FApps%20Info.png?alt=media&amp;token=40d81d99-ffa7-4f7a-a3a2-ad780b90d21d" alt=""><figcaption></figcaption></figure>

### Apps Appreance

* Certainly, here's a more detailed description of the "App Appearance Configuration" for Page 1 (Landing Page) and Page 2 (Conversational Interface), along with examples:

* **Page 1 - Landing Page**

  <figure><img src="https://4292326968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqsAGx1GJXq13bQhP2sY7%2Fuploads%2FdIF18T9lPBPd4SZ4BJIZ%2FLanding%20Page.png?alt=media&amp;token=d0e8a7f5-dfd1-4b8b-812e-4f67bbb9a9f2" alt=""><figcaption></figcaption></figure>

* Landing Page Logo Customization : option to upload and set a logo for the app's landing page.can upload an image file (e.g., PNG or JPEG) of their company logo and position it.

* Landing Page Color : customize the color scheme of the landing page.

* **Page 2 - Conversational Interface**

<figure><img src="https://4292326968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqsAGx1GJXq13bQhP2sY7%2Fuploads%2FkU6aAqjger63uYryaSAm%2FConvo%20Page.png?alt=media&amp;token=5a2ac3ad-df0e-47cd-aac1-f8580aafa19f" alt=""><figcaption></figcaption></figure>

* Logo Customization: customize the logo for the conversational interface. This logo is often displayed within top sidebar.

<figure><img src="https://4292326968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqsAGx1GJXq13bQhP2sY7%2Fuploads%2Fls8zc995cizN9kbCUXul%2FLogo.png?alt=media&amp;token=d7640992-3650-435a-a4fa-53a03492616d" alt="" width="352"><figcaption></figcaption></figure>

* Greeting: Users can customize the chatbot greeting by entering a custom text that will be displayed to users when they interact with the app.

<figure><img src="https://4292326968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqsAGx1GJXq13bQhP2sY7%2Fuploads%2F9Llz9vFNIdg26c5Aaxrp%2FGreetings.png?alt=media&amp;token=e84a0fd7-030d-4e7c-8999-595892a88b85" alt="" width="363"><figcaption></figcaption></figure>

* Greeting Text Input:

  * should be able to customize the chatbot greeting by entering a custom text.
  * The system should allow users to input a greeting text of up to 200 characters in length.

### **Identity Manager**

\
Integrate Google SSO into Your Web App:

<figure><img src="https://4292326968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqsAGx1GJXq13bQhP2sY7%2Fuploads%2F3rurSAme2d6UnlGJeGqI%2Fidentitymanager.png?alt=media&amp;token=8e78dd8b-9e87-4488-81de-9b898991a907" alt=""><figcaption></figcaption></figure>

* Configuration: Configure the Google API client with
  * Client ID. :\
    should look something like this: 1234567890-abcd1234efgh5678ijklmnopqrstuv.apps.googleusercontent.com.
  * Obtain Email : input domain mail example @feedloop.ai
    * After the user logs in with their Google account, you can obtain their email address from the authentication response.
    * Implement logic to check if the user's email address ends with the specified domain, in this case, "@feedloop.ai." If it does not match the allowed domain, deny access or show an error message.

CLIENT  SIDE1. Configure OAuth 2.

* Go to the [Google Developer Console](https://console.developers.google.com/).
* Create a new project or select an existing project where you want to configure the OAuth 2.0 Client ID.
* In the left sidebar, click on "APIs & Services" and then "Credentials."
* Click the "Create credentials" button and select "OAuth client ID."
* Choose "Web application" as the application type for your OAuth client ID.
* Configure the OAuth Client ID by specifying the following details:
  * Name: Give your OAuth 2.0 Client ID a descriptive name for your reference.
  * Authorized JavaScript Origins: This should be the domain where your web app is hosted, such as <https://flai-webapp.com>.
  * Authorized Redirect URIs: This should be the URL where Google will redirect the user after successful authentication. Typically, it's something like <https://flai-webapp.com/login/google/callback>. Make sure this matches the callback URL you handle on your server.

### Apps Integration

webapp will be accessible via a subdomain under the domain structure yournameapp.webapp.feedloop.ai. allows you to create a subdomain that dynamically maps to your app within the Feedloop AI platform.

<figure><img src="https://4292326968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqsAGx1GJXq13bQhP2sY7%2Fuploads%2FadVH69ijEELTdN5mYA2c%2Fimage.png?alt=media&amp;token=5af76d76-b60d-4b06-848e-0d1f3126d7ee" alt=""><figcaption></figcaption></figure>

* Each app deployed under  project can have its unique subdomain
* easy to access without configuring individual DNS records for each app.
* For example, if you have multiple apps like "app1," "app2," and "app3," they can be accessed as app1.yournameapp.webapp.feedloop.ai, app2.yournameapp.webapp.feedloop.ai, and app3.yournameapp.webapp.feedloop.ai respectively.

### Version History&#x20;

<figure><img src="https://4292326968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqsAGx1GJXq13bQhP2sY7%2Fuploads%2FgtZGUetblwH77QbvWFMv%2Fversioning.png?alt=media&amp;token=e1e3c2b3-4a73-42e9-a093-0ec8ea26e02e" alt=""><figcaption></figcaption></figure>

* List of Previous Versions: Displays a chronological list of previous versions of the app. contain
  * App Title: The title or name of the app for the specific version.
  * Version Number: The unique identifier or number assigned to the version.
  * Components: Details of the app's components, such as chat interface, integrations, or other relevant features.
  * Greeting: The customized chatbot greeting specific to the version.
  * Colors and Styling: Information about the color scheme and visual styling applied to the app.
  * Additional Details: Any other relevant information specific to the version, such as feature updates or bug fixes.

> If you have any further questions or need assistance, feel free to reach out to our support team.