{"id":20511287,"url":"https://github.com/intility/intilityflexchat","last_synced_at":"2025-06-12T20:04:25.139Z","repository":{"id":42226133,"uuid":"264238331","full_name":"intility/IntilityFlexChat","owner":"intility","description":"Intility Chat is a React Component that wraps Twilio's WebChat UI with basic configuartion and theme.","archived":false,"fork":false,"pushed_at":"2023-11-10T12:07:15.000Z","size":1348,"stargazers_count":10,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T21:52:12.875Z","etag":null,"topics":["flex-webchat-ui","intility","npm","react","twilio"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/intility.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-15T16:04:32.000Z","updated_at":"2025-04-15T03:46:56.000Z","dependencies_parsed_at":"2024-11-18T07:32:57.749Z","dependency_job_id":null,"html_url":"https://github.com/intility/IntilityFlexChat","commit_stats":{"total_commits":157,"total_committers":4,"mean_commits":39.25,"dds":0.2738853503184714,"last_synced_commit":"fda7f7dda4a31da9f04facddbda0beba07a2cca8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/intility/IntilityFlexChat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intility%2FIntilityFlexChat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intility%2FIntilityFlexChat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intility%2FIntilityFlexChat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intility%2FIntilityFlexChat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/intility","download_url":"https://codeload.github.com/intility/IntilityFlexChat/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intility%2FIntilityFlexChat/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259521513,"owners_count":22870446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flex-webchat-ui","intility","npm","react","twilio"],"created_at":"2024-11-15T20:35:24.296Z","updated_at":"2025-06-12T20:04:25.120Z","avatar_url":"https://github.com/intility.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Intility Chat\n\n![Build and deploy package to NPM](https://github.com/Intility/IntilityFlexChat/workflows/Build%20and%20deploy%20package%20to%20npm/badge.svg)\n\nIntility Chat is a React Component that wraps [Twilio's WebChat UI](https://www.npmjs.com/package/@twilio/flex-webchat-ui) with basic configuration and theme.\n\n## Purpose\n\n\u003c!-- What does the application do and why? What problem does it solve? --\u003e\nIntility Chat makes it easy for third parties to implement a customized version of Flex WebChat UI that is tailored to fit our design guidelines and then deliver an consistent user experience to the end user.\n\n## Intended consumers\n\n\u003c!--  Who is the application intended for, and who can utilize its features? --\u003e\nThis component is intended for customer facing web portals that isn't developed by Intility, but we use in production.\n\n## Main technologies\n\n\u003c!-- What are the main languages and frameworks are used in the project --\u003e\nThis project utilizes among others the following libraries:\n\n* [React](https://reactjs.org/)\n* [TypeScript](https://www.typescriptlang.org/)\n* [Babel](https://babeljs.io/)\n* [@twilio/flex-webchat-ui](https://www.npmjs.com/package/@twilio/flex-webchat-ui)\n* have a look in [package.json](package.json) for complete list of dependencies\n  \n## Getting Started\n\n### Installation\n\n#### NPM\n\n```bash\nnpm i @intility/flex-chat\n```\n\n### Required Configuration\n\n#### Environment variables\n\n**NOTE:** If you haven't got these keys, please contact your provided Intility Contact.\n\n```env\nREACT_APP_ACCOUNT_SID=xxxxx\nREACT_APP_FLOW_SID=xxxxx\n```\n\n#### Properties\n\n```ts\ntype ConfigProps = {\n    flexFlowSid: string;\n    flexAccountSid: string;\n    user: ChatContext; // User context\n    loglevel?: 'debug' | 'superDebug';\n    closeOnInit?: boolean;\n    theme?: ThemeConfig;\n    preEngagementFormMessage?: MultiLangText;\n    user: ChatContext;\n};\n\ntype FlexChatProps = {\n    config: ConfigProps;\n    isDarkMode: boolean;\n    isDisabled?: boolean;\n};\n```\n\n**NOTE:** The properties marked with `?` is optional.\n\n#### Authentication\n\nSince this package initializes an chat session with an Intility Support Agent there is a requirement to provide a authenticated users details in the config object.\n\n**NOTE:** This components does not give other requirements to authentication implementations but to provide the components with these values.\n\n```ts\ntype AllowedValues = string | number | boolean | undefined | null | string[] | number[] | boolean[] | object;\n\ntype ChatContext = { \n    // Value to be displayed as the sender in the chat. \n    // This should be the authenitcated users full name if available, but fallback to the users login EMail.\n    userPrincipalName: string;\n    \n    // The email used for login for the user\n    mail: string;\n    \n    // Telephone number for the user\n    mobilePhone: string;\n    \n    // The preferred language for the user. Should follow ISO 639-1 Code\n    preferredLanguage: string;\n    \n    // Other user context is welcome and can be sent as other optional properties.\n    [key: string]: AllowedValues;\n};\n```\n\n### Example Configuration\n\n```ts\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { FlexChat, ConfigProps } from '@intility/flex-chat/dist/index';\n\nconst App: React.FC = (props) =\u003e {\n    const [isDarkMode, setIsDarkMode] = useState(false);\n\n    const config: ConfigProps = {\n        flexAccountSid: process.env.REACT_APP_ACCOUNT_SID,\n        flexFlowSid: process.env.REACT_APP_FLOW_SID,\n        user: {\n            userPrincipalName: 'ola.normann@intility.no',\n            mail: 'ola.normann@intility.no',\n            mobilePhone: '815-493-00',\n            preferredLanguage: 'nb-NO'\n        },\n    };\n\n    return (\n        \u003cFlexChat config={config} isDarkMode={isDarkMode} isDisabled={false} /\u003e \n    );\n};\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n### Optional Configuration\n\n#### Keep the chat closed on page load\n\nIf you want to have the Chat component closed on initialization you can set the property named `closeOnInit` to `true` in the config object. \nDefault behavior is for the chat component to expand on page load.\n\n**NOTE:** If there is an ongoing chat session the chat window will always expand on page load. \n\n```ts\nconst config: ConfigProps = {\n    // ...required config\n    closeOnInit: true\n};\n```\n\n#### PreEngagementFormMessage\n\nIf you want to add a message to the start page you can add a property named `preEngagementFormMessage` to the config object.\n\nThis object is of type `MultiLangText` and consists of an English (en) and Norwegian (no).\n\n```ts\nconst config: ConfigProps = {\n    // ...required config\n    preEngagementFormMessage: {\n        en: 'Du kan nå teknikere på ansvarlig avdeling innenfor tidspunktene 08:00 - 16:00 (CET/CEST)',\n        no: 'You can reach technicians in the responsible department within the hours 08:00 - 16:00 (CET / CEST)';\n    },\n};\n```\n\n#### Theming\n\nYou can change CSS properties on the `MainContainer`, `EntryPoint` and `CloseButton` components to make them fit your experience, e.g. hide the `EntryPoint` button or change the height, width or render properties like position.\n\n* MainContainer: The expanded chat box.\n* EntryPont: Toggle button in the bottom right corner.\n* CloseButton: Toggle button on the top bar in the `MainContainer`\n\n**NOTE:** some properties will be default from Twilio or overwritten by Intility's setup of the chat component.\n\n```ts\ntype ThemeConfig = {\n    MainContainer?: CSSProps;\n    EntryPoint?: CSSProps;\n    CloseButton?: CSSProps;\n};\n```\n\n```ts\nconst config: ConfigProps = {\n    // ...required config\n    theme: {\n        MainContainer: {\n            width: '800px',\n            height: '87vh',\n            '@media only screen and (min-width: 1415px)': {\n                width: `1080px`,\n            },\n        },\n        // Display EntryPoint for small devices (i.e. Smart phones)\n        EntryPoint: {\n            '@media only screen and (min-width: 767px)': {\n                display: 'none !important',\n            },\n        },\n        // Display CloseButton for small devices (i.e. Smart phones)\n        CloseButton: {\n            '@media only screen and (min-width: 767px)': {\n                display: 'none',\n            },\n        },\n    },\n};\n```\n\n## Usage\n\n### Hooks\n\nThis component can be interacted with using integrated `useChatActions` hook.\n\n```ts\ntype UseChatActionsFuncs = {\n    setInputFieldContent: (body: string) =\u003e Promise\u003cunknown\u003e;\n    setAndSendInputFieldContent: (body: string) =\u003e Promise\u003cunknown\u003e;\n    toggleChatVisibility: () =\u003e Promise\u003cunknown\u003e;\n    hasUserReadLastMessage: () =\u003e Promise\u003cboolean\u003e;\n    isChatOpen: () =\u003e Promise\u003cboolean\u003e;\n};\n```\n\n## Illustration\n\n![Successful chat setup](https://i.imgur.com/pMNk5mL.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintility%2Fintilityflexchat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintility%2Fintilityflexchat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintility%2Fintilityflexchat/lists"}