-
-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9ec3f35
commit 45aa4c6
Showing
6 changed files
with
171 additions
and
0 deletions.
There are no files selected for viewing
Binary file added
BIN
+12.3 MB
apps/builder/public/images/emails/V2dot26Update/chatContainerThemeOptions.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
98 changes: 98 additions & 0 deletions
98
packages/transactional/templates/marketing/V2dot26Update.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
import { Text, Hr } from '@react-email/components' | ||
import * as React from 'react' | ||
import { env } from '@typebot.io/env' | ||
import { text, hr } from './styles' | ||
import { NewsletterLayout } from './components/NewsletterLayout' | ||
import { NewsletterSection } from './components/NewsletterSection' | ||
|
||
const imagesBaseUrl = `${env.NEXTAUTH_URL}/images/emails/V2dot26Update` | ||
|
||
export const V2dot26Update = () => ( | ||
<NewsletterLayout preview="Unveiling Typebot's Latest Innovations - v2.26 Update! 🌟"> | ||
<Text style={text}> | ||
Heya, <br /> | ||
<br /> | ||
Typebot v2.26 was just released. It comes with cool new stuff. | ||
<br /> | ||
<br /> | ||
Let's dive into what's new! 🔥 | ||
</Text> | ||
|
||
<NewsletterSection | ||
title="NocoDB block" | ||
image={{ | ||
src: `${imagesBaseUrl}/nocodb.jpg`, | ||
alt: 'New NocoDB block', | ||
}} | ||
> | ||
The NocoDB block is a new block that allows you to store and retrieve data | ||
from a NocoDB database. It's a powerful tool for building applications | ||
that require data storage and retrieval. | ||
<br /> | ||
<br /> | ||
Finally, a great open-source alternative to existing Google Sheets block. | ||
</NewsletterSection> | ||
|
||
<NewsletterSection | ||
title="Variables panel" | ||
image={{ | ||
alt: 'Variables panel', | ||
src: `${imagesBaseUrl}/variablesPanel.gif`, | ||
}} | ||
> | ||
Allows you to see all your variables at a glance and edit them with much | ||
more comfort 💆 | ||
</NewsletterSection> | ||
|
||
<NewsletterSection title="Transcript variable"> | ||
The "Set variable" block now has a "Transcript" value option. This injects | ||
the entire conversation transcript in a variable. This is useful if you | ||
need to provide context for an AI block. <br /> | ||
<br /> | ||
For example you could add in a system prompt: | ||
<br /> | ||
<br /> | ||
"Your answer should be based on the context inside the <context> XML | ||
element: | ||
<br /> | ||
<context>{'{{'}Transcript{'}}'}</context>" | ||
</NewsletterSection> | ||
|
||
<NewsletterSection | ||
title="New container theme options" | ||
image={{ | ||
alt: 'Chat window theme options demo', | ||
src: `${imagesBaseUrl}/chatContainerThemeOptions.gif`, | ||
}} | ||
> | ||
You can now customize the chat window theme with the new container theme | ||
options. This allows you to change the background color, border color, and | ||
text color of the chat window. | ||
</NewsletterSection> | ||
|
||
<NewsletterSection title="New templates"> | ||
🏃 Quick Carb Calculator - Designed specifically for athlete fueling | ||
brands looking to attract and engage active audiences, this chatbot serves | ||
as an effective lead magnet by providing instant, customized carbohydrate | ||
intake recommendations based on user input. | ||
<br /> | ||
<br /> | ||
💆♀️ Skin Typology - A skin typology expert bot designed as a lead magnet | ||
for Typology, this bot asks a series of personalized questions to | ||
determine the user's unique skin type. He then receives a detailed | ||
diagnosis and tailored skincare AI-based recommendations. | ||
</NewsletterSection> | ||
|
||
<Hr style={hr} /> | ||
|
||
<Text style={{ ...text, marginBottom: '60px' }}> | ||
As always, your feedback is invaluable, so please don't hesitate to share | ||
your thoughts. | ||
<br /> | ||
<br /> | ||
Baptiste. | ||
</Text> | ||
</NewsletterLayout> | ||
) | ||
|
||
export default V2dot26Update |
55 changes: 55 additions & 0 deletions
55
packages/transactional/templates/marketing/components/NewsletterLayout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { | ||
Html, | ||
Head, | ||
Preview, | ||
Body, | ||
Container, | ||
Img, | ||
Link, | ||
Text, | ||
} from '@react-email/components' | ||
import { main, container, footer, link } from '../styles' | ||
import { env } from '@typebot.io/env' | ||
|
||
type Props = { | ||
children: React.ReactNode | ||
preview: string | ||
} | ||
export const NewsletterLayout = ({ preview, children }: Props) => ( | ||
<Html> | ||
<Head /> | ||
<Preview>{preview}</Preview> | ||
<Body style={main}> | ||
<Container style={container}> | ||
<Img | ||
src={`${env.NEXTAUTH_URL}/images/logo.png`} | ||
width="32" | ||
height="32" | ||
alt="Typebot's Logo" | ||
style={{ | ||
margin: '24px 0', | ||
}} | ||
/> | ||
{children} | ||
<Img | ||
src={`${env.NEXTAUTH_URL}/images/logo.png`} | ||
width="32" | ||
height="32" | ||
alt="Typebot's Logo" | ||
style={{ | ||
marginTop: '24px', | ||
}} | ||
/> | ||
|
||
<Text style={footer}>Typebot.io - Powering Conversations at Scale</Text> | ||
<Link | ||
href="{{unsubscribe}}" | ||
target="_blank" | ||
style={{ ...link, color: '#898989', fontSize: '12px' }} | ||
> | ||
Unsubscribe | ||
</Link> | ||
</Container> | ||
</Body> | ||
</Html> | ||
) |
18 changes: 18 additions & 0 deletions
18
packages/transactional/templates/marketing/components/NewsletterSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { Img, Text, Heading, Section } from '@react-email/components' | ||
import { featureSection, heading, text, image as imageStyle } from '../styles' | ||
|
||
type Props = { | ||
title: string | ||
children: React.ReactNode | ||
image?: { | ||
src: string | ||
alt: string | ||
} | ||
} | ||
export const NewsletterSection = ({ title, image, children }: Props) => ( | ||
<Section style={featureSection}> | ||
<Heading style={heading}>{title}</Heading> | ||
<Text style={text}>{children}</Text> | ||
{image && <Img src={image.src} alt={image.alt} style={imageStyle} />} | ||
</Section> | ||
) |