LogoTanStarter Docs
LogoTanStarter Docs
HomepageIntroductionCodebaseGetting StartedEnvironments
Configuration
Deployment

Integrations

CloudflareDatabaseAuthenticationEmailNewsletterStoragePaymentNotificationsAnalyticsChatboxAffiliates

Customization

MetadataPagesLanding PageBlogComponentsUser ManagementAPI Key Management

Codebase

Project StructureFormatting & LintingEditor SetupUpdating the Codebase
X (Twitter)

Chatbox

Learn how to configure live chat for your TanStarter application

TanStarter supports Crisp for live chat and customer support. Crisp provides live chat, a shared inbox, and campaign automation.

Setup

Create Crisp Account

Go to Crisp and sign up for an account. Create a new website/workspace.

Get Website ID

Go to Settings → Website Settings → Setup. Copy your Website ID from the embed code.

Add Environment Variable

Add the Website ID to your .env file:

.env
VITE_CRISP_WEBSITE_ID=your_crisp_website_id

The chatbox component is in src/components/chatbox/crisp-chat.tsx and is loaded in src/routes/__root.tsx. Once the environment variable is set, the Crisp chat widget will automatically appear on your website.

If you are setting up your environment, you can now go back to the Environment Configuration and continue. The rest of this document can be read later.

Environment Configuration

Set up environment variables

References

  • Crisp Documentation

Related Documentation

Email

Configure email services

Notifications

Configure notification webhooks

Deployment

Deploy to Cloudflare Workers

Analytics

Configure analytics

Table of Contents

Setup
Create Crisp Account
Get Website ID
Add Environment Variable
References
Related Documentation