From a57253919fb4142595cfa03a0f995a8714a64d7e Mon Sep 17 00:00:00 2001 From: Alex Teusz Date: Fri, 25 Nov 2022 09:47:02 +0100 Subject: [PATCH 1/2] added customBranding settings (enableCustomBranding, customBrandingTitle, customBrandingURL) --- dist/index.html | 6 +++- src/common/interfaces/webchat-config.ts | 3 ++ src/webchat-ui/components/WebchatUI.tsx | 13 ++++++- .../components/branding/CustomBranding.tsx | 35 +++++++++++++++++++ .../components/history/ChatScroller.tsx | 18 ++++++++-- src/webchat/store/config/config-reducer.ts | 3 ++ 6 files changed, 74 insertions(+), 4 deletions(-) create mode 100644 src/webchat-ui/components/branding/CustomBranding.tsx diff --git a/dist/index.html b/dist/index.html index 34d34ddd..add30d11 100644 --- a/dist/index.html +++ b/dist/index.html @@ -20,7 +20,11 @@ showEngagementMessagesInChat: true, getStartedText: "", engagementMessageText: "Hi there!", - engagementMessageDelay: 5000 + engagementMessageDelay: 5000, + disableBranding: false, + enableCustomBranding: true, + customBrandingTitle: "Schwarzkopf Professional USA may retain this chat. For more information, see our Privacy Policy.", + customBrandingURL: "https://www.henkel-northamerica.com/privacy-statement-na" } }).then(function(webchat) { window.cognigyWebchat = webchat; diff --git a/src/common/interfaces/webchat-config.ts b/src/common/interfaces/webchat-config.ts index f2cf3fbc..ad8e4b30 100644 --- a/src/common/interfaces/webchat-config.ts +++ b/src/common/interfaces/webchat-config.ts @@ -12,6 +12,9 @@ export interface IWebchatSettings { colorScheme: string; designTemplate: number; disableBranding: boolean; + enableCustomBranding: boolean; + customBrandingTitle: string; + customBrandingURL: string; disableDefaultReplyCompatiblityMode: boolean; disableHtmlContentSanitization: boolean; disableHtmlInput: boolean; diff --git a/src/webchat-ui/components/WebchatUI.tsx b/src/webchat-ui/components/WebchatUI.tsx index 3fcc9bc3..19cc2324 100644 --- a/src/webchat-ui/components/WebchatUI.tsx +++ b/src/webchat-ui/components/WebchatUI.tsx @@ -522,11 +522,19 @@ export class WebchatUI extends React.PureComponent New message preview {lastUnseenMessageText} + ) } @@ -593,6 +601,9 @@ export class WebchatUI extends React.PureComponent diff --git a/src/webchat-ui/components/branding/CustomBranding.tsx b/src/webchat-ui/components/branding/CustomBranding.tsx new file mode 100644 index 00000000..9b1d40b3 --- /dev/null +++ b/src/webchat-ui/components/branding/CustomBranding.tsx @@ -0,0 +1,35 @@ +import React, { memo } from 'react'; +import { styled } from '../../style'; + +const Link = styled.a(({ theme }) => ({ + alignItems: "flex-end", + color: theme.greyWeakColor, + display: "flex", + fontSize: theme.unitSize * 1.375, + justifyContent: "center", + lineHeight: 1, + marginTop: 'auto', + padding: theme.unitSize * 2, + paddingBottom: 0, + textAlign: 'center', + textDecoration: 'none', + + "&:focus":{ + outline: "none", + color: theme.primaryWeakColor, + "#cognigyBrandingLogo": { + "& path, & polygon": { + fill: theme.primaryWeakColor, + } + } + } +})); + + +const CustomBranding = (props: { branding: string, url: string;}) => ( + + {props?.branding} + +); + +export default memo(CustomBranding, () => true); diff --git a/src/webchat-ui/components/history/ChatScroller.tsx b/src/webchat-ui/components/history/ChatScroller.tsx index adf0fcbc..25eb8d6e 100644 --- a/src/webchat-ui/components/history/ChatScroller.tsx +++ b/src/webchat-ui/components/history/ChatScroller.tsx @@ -1,11 +1,15 @@ import * as React from 'react' import {styled} from '../../style'; import Branding from '../branding/Branding' +import CustomBranding from '../branding/CustomBranding'; const CLIENT_HEIGHT_OFFSET = 16 + 70; // banner + typing indicator export interface OuterProps extends React.HTMLProps { disableBranding: boolean; + enableCustomBranding: boolean; + customBrandingTitle: string; + customBrandingURL: string; showFocusOutline: boolean; } @@ -94,7 +98,7 @@ export class ChatScroller extends React.Component { } render() { - const { children, disableBranding, showFocusOutline, ...restProps } = this.props; + const { children, disableBranding, enableCustomBranding, customBrandingTitle, customBrandingURL, showFocusOutline, ...restProps } = this.props; return ( @@ -111,7 +115,17 @@ export class ChatScroller extends React.Component { {children} {/* Branding Logo Link */} - {!disableBranding && } + { + !disableBranding && enableCustomBranding + ? + + : + !disableBranding && !enableCustomBranding + ? + + : + null + } ) } diff --git a/src/webchat/store/config/config-reducer.ts b/src/webchat/store/config/config-reducer.ts index 15241f5f..0b2f8802 100644 --- a/src/webchat/store/config/config-reducer.ts +++ b/src/webchat/store/config/config-reducer.ts @@ -15,6 +15,9 @@ export const getInitialState = (): ConfigState => ({ colorScheme: "", designTemplate: 1, disableBranding: false, + enableCustomBranding: false, + customBrandingTitle: "", + customBrandingURL: "https://www.cognigy.com", disableDefaultReplyCompatiblityMode: false, disableHtmlContentSanitization: false, disableHtmlInput: false, From d568cf54ccfe03eb59d075b6ae5f0417eb0dad23 Mon Sep 17 00:00:00 2001 From: Alex Teusz Date: Fri, 25 Nov 2022 09:51:51 +0100 Subject: [PATCH 2/2] added custom branding to settings docs --- docs/embedding.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/embedding.md b/docs/embedding.md index 0e7981a4..a07ceb11 100644 --- a/docs/embedding.md +++ b/docs/embedding.md @@ -75,6 +75,9 @@ See it in action: | colorScheme | string | #2C6CAF | x | | | The background color of the header and bot messages in the Webchat. | | designTemplate | 1 or 2 | 1 | x | x | | The Webchat design template to use. We default to design template 1 (bottom right with a button), you can switch to template 2, which is the centered webchat. | | disableBranding | boolean | false | | | | If true, hides "Powered by Cognigy" link | +| enableCustomBranding | boolean | false | | | | If true, shows a custom branding instead of the standard one | +| customBrandingTitle | string | "" | | | | The title of the custom branding, such as "Please find our Privacy Policy here" | +| customBrandingURL | string | "" | | | | The optional URL that will be opened when a user clicks on the custom branding title. | | disableDefaultReplyCompatiblityMode | boolean | false | | | | If this is set to true, the webchat will not try to look for messenger content in `data._data._cognigy`. This can lead to issues with structured content in Intent Default Replies. | | disableHtmlContentSanitization | boolean | false | x | | | If true, will disable the removal of potentially malicious tags/attributes when rendering HTML content (applies to default message plugins!) | | disableHtmlInput | boolean | false | | | | If true, strips all html tags out from the input of the user. |