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

Improvements to chat, show pop up on pricing page #23

Merged
merged 3 commits into from
Apr 8, 2021
Merged

Improvements to chat, show pop up on pricing page #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
beed67c
Improvements to chat, pop up on pricing page
reichert621 Apr 8, 2021
7381c08
Minor improvement
reichert621 Apr 8, 2021
7d58eca
Comment for clarity
reichert621 Apr 8, 2021
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
4 changes: 2 additions & 2 deletions components/ChatDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,8 +202,8 @@ const ChatDemo = () => {
return (
<Box
sx={{
height: 600,
width: '350px',
height: 560,
width: 376,
border: '1px solid rgb(230, 230, 230)',
borderRadius: 4,
overflow: 'hidden',
Expand Down
189 changes: 110 additions & 79 deletions components/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,29 @@ export default class Container extends React.Component<Props, State> {
}
}

// TODO: find a better way to handle this?
isWindowReady = () => {
return typeof window !== 'undefined';
};

getCurrentWindowPath = (): string | null => {
if (typeof window !== 'undefined') {
return window.location.pathname;
} else {
return null;
}
};

shouldPopUpInitialMessage = (): number | boolean => {
return this.getCurrentWindowPath() === '/pricing';
};

shouldDisplayMailchimpForm = () => {
const path = this.getCurrentWindowPath();
// Only display on blog pages
return path && path?.startsWith('/blog');
};

render() {
return (
<Layout style={{background: colors.white}}>
Expand Down Expand Up @@ -93,25 +116,25 @@ export default class Container extends React.Component<Props, State> {

<Box>
<Menu style={{borderBottom: 'none'}} mode="horizontal">
<Menu.Item style={{margin: '0 1em'}} key="home">
<Link href="/">
<a>Home</a>
</Link>
</Menu.Item>
<Menu.Item style={{margin: '0 1em'}} key="blog">
<Link href="/blog">
<a>Blog</a>
</Link>
</Menu.Item>
<Menu.Item style={{margin: '0 1em'}} key="features">
<a
href="https://github.com/papercups-io/papercups/wiki/Features"
href="https://docs.papercups.io/#features"
target="_blank"
rel="noopener noreferrer"
>
Features
</a>
</Menu.Item>
<Menu.Item style={{margin: '0 1em'}} key="pricing">
<Link href="/pricing">
<a>Pricing</a>
</Link>
</Menu.Item>
<Menu.Item style={{margin: '0 1em'}} key="github">
<a
href="https://github.com/papercups-io/papercups"
Expand Down Expand Up @@ -148,64 +171,66 @@ export default class Container extends React.Component<Props, State> {
</MDXProvider>
</Box>
</Content>
<div>
{/* Begin Mailchimp Signup Form */}
<link
href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
rel="stylesheet"
type="text/css"
/>
<style
type="text/css"
dangerouslySetInnerHTML={{
__html:
'\n\t#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}\n\t/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.\n\t We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */\n',
}}
/>
<div id="mc_embed_signup">
<form
action="https://papercups.us1.list-manage.com/subscribe/post?u=3a91de52d39fe8157b80ab8cf&id=9bc2b3ce0a"
method="post"
id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
className="validate"
target="_blank"
noValidate
>
<div id="mc_embed_signup_scroll">
<input
type="email"
name="EMAIL"
className="email"
id="mce-EMAIL"
placeholder="email address"
required
/>
{/* real people should not fill this in and expect good things - do not remove this or risk form bot signups*/}
<div
style={{position: 'absolute', left: '-5000px'}}
aria-hidden="true"
>
{this.shouldDisplayMailchimpForm() && (
<div>
{/* Begin Mailchimp Signup Form */}
<link
href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
rel="stylesheet"
type="text/css"
/>
<style
type="text/css"
dangerouslySetInnerHTML={{
__html:
'\n\t#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}\n\t/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.\n\t We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */\n',
}}
/>
<div id="mc_embed_signup">
<form
action="https://papercups.us1.list-manage.com/subscribe/post?u=3a91de52d39fe8157b80ab8cf&id=9bc2b3ce0a"
method="post"
id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
className="validate"
target="_blank"
noValidate
>
<div id="mc_embed_signup_scroll">
<input
type="text"
name="b_3a91de52d39fe8157b80ab8cf_9bc2b3ce0a"
tabIndex={-1}
/>
</div>
<div className="clear">
<input
type="submit"
value="Subscribe"
defaultValue="Subscribe"
name="subscribe"
id="mc-embedded-subscribe"
className="button"
type="email"
name="EMAIL"
className="email"
id="mce-EMAIL"
placeholder="email address"
required
/>
{/* real people should not fill this in and expect good things - do not remove this or risk form bot signups*/}
<div
style={{position: 'absolute', left: '-5000px'}}
aria-hidden="true"
>
<input
type="text"
name="b_3a91de52d39fe8157b80ab8cf_9bc2b3ce0a"
tabIndex={-1}
/>
</div>
<div className="clear">
<input
type="submit"
value="Subscribe"
defaultValue="Subscribe"
name="subscribe"
id="mc-embedded-subscribe"
className="button"
/>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
)}

<Footer style={{backgroundColor: '#001529'}}>
<Box p={5}>
Expand All @@ -215,26 +240,32 @@ export default class Container extends React.Component<Props, State> {
</Box>
</Footer>

<ChatWidget
title="Welcome to Papercups!"
subtitle="Ask us anything in the chat window below 😊"
greeting="Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!"
primaryColor="#1890ff"
accountId="eb504736-0f20-4978-98ff-1a82ae60b266"
iconVariant="filled"
requireEmailUpfront
showAgentAvailability
setDefaultGreeting={(settings) => {
const path = window.location.pathname;

switch (path) {
case '/pricing':
return "Hi there! Let us know if you have any questions about pricing :) (we're offering deals to startups and international founders)";
default:
return "Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!";
{this.isWindowReady() && (
<ChatWidget
title="Welcome to Papercups!"
subtitle="Ask us anything in the chat window below 😊"
greeting="Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!"
primaryColor="#1890ff"
accountId="eb504736-0f20-4978-98ff-1a82ae60b266"
iconVariant="filled"
requireEmailUpfront
showAgentAvailability
// Pops up initial message after 2s when `shouldPopUpInitialMessage` return `true`
popUpInitialMessage={
this.shouldPopUpInitialMessage() ? 2000 : false
}
}}
/>
setDefaultGreeting={(settings) => {
const path = window.location.pathname;

switch (path) {
case '/pricing':
return "Hi there! Let us know if you have any questions about pricing :) (we're offering deals to startups and international founders)";
default:
return "Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!";
}
}}
/>
)}
</Layout>
);
}
Expand Down
15 changes: 7 additions & 8 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"@mdx-js/react": "^1.6.16",
"@next/mdx": "^9.5.1",
"@papercups-io/chat-builder": "0.0.6",
"@papercups-io/chat-widget": "^1.1.9-beta.0",
"@papercups-io/chat-widget": "^1.1.10",
"@papercups-io/storytime": "^1.0.5",
"antd": "4.4.2",
"axios": "^0.21.1",
Expand Down
2 changes: 1 addition & 1 deletion pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export default class extends Component {
justifyContent="center"
style={{
width: '100%',
height: '600px',
height: '100%',
}}
>
<ChatDemo />
Expand Down