Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/custom branding #287

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Feature/custom branding #287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a572539
added customBranding settings (enableCustomBranding, customBrandingTi…
alexteusz Nov 25, 2022
d568cf5
added custom branding to settings docs
alexteusz Nov 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions docs/embedding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
3 changes: 3 additions & 0 deletions src/common/interfaces/webchat-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
13 changes: 12 additions & 1 deletion src/webchat-ui/components/WebchatUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -522,11 +522,19 @@ export class WebchatUI extends React.PureComponent<React.HTMLProps<HTMLDivElemen
lastUnseenMessageText && (
<UnreadMessagePreview
className="webchat-unread-message-preview"
onClick={onToggle}
// onClick={onToggle}
aria-live="polite"
>
<span className="sr-only">New message preview</span>
{lastUnseenMessageText}
<button
style={{
background: "transparent",
border: "none",
cursor: "pointer"
}}
onClick={onClose}
>X</button>
</UnreadMessagePreview>
)
}
Expand Down Expand Up @@ -593,6 +601,9 @@ export class WebchatUI extends React.PureComponent<React.HTMLProps<HTMLDivElemen
/>
<HistoryWrapper
disableBranding={config.settings.disableBranding}
enableCustomBranding={config.settings.enableCustomBranding}
customBrandingTitle={config.settings.customBrandingTitle}
customBrandingURL={config.settings.customBrandingURL}
ref={this.history as any}
className="webchat-chat-history"
>
Expand Down
35 changes: 35 additions & 0 deletions src/webchat-ui/components/branding/CustomBranding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;}) => (
<Link href={props?.url} target="_blank" aria-label={props?.branding} id="cognigyBrandingLink">
{props?.branding}
</Link>
);

export default memo(CustomBranding, () => true);
18 changes: 16 additions & 2 deletions src/webchat-ui/components/history/ChatScroller.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<HTMLDivElement> {
disableBranding: boolean;
enableCustomBranding: boolean;
customBrandingTitle: string;
customBrandingURL: string;
showFocusOutline: boolean;
}

Expand Down Expand Up @@ -94,7 +98,7 @@ export class ChatScroller extends React.Component<InnerProps, IState> {
}

render() {
const { children, disableBranding, showFocusOutline, ...restProps } = this.props;
const { children, disableBranding, enableCustomBranding, customBrandingTitle, customBrandingURL, showFocusOutline, ...restProps } = this.props;

return (
<ChatLogWrapper ref={this.rootRef} showFocusOutline={this.state.isChatLogFocused} {...restProps}>
Expand All @@ -111,7 +115,17 @@ export class ChatScroller extends React.Component<InnerProps, IState> {
{children}
</ChatLog>
{/* Branding Logo Link */}
{!disableBranding && <Branding />}
{
!disableBranding && enableCustomBranding
?
<CustomBranding branding={customBrandingTitle} url={customBrandingURL}/>
:
!disableBranding && !enableCustomBranding
?
<Branding />
:
null
}
</ChatLogWrapper>
)
}
Expand Down
3 changes: 3 additions & 0 deletions src/webchat/store/config/config-reducer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down