Text Platform | App - Next.js SaaS boilerplate

This template bootstraps CRM-like Text Platform App with a predefined configuration and code responsible for:

• integration with LiveChat Widgets
• managing and persisting LiveChat customers using database

ℹ️ Content

The template is built using:

• Next.js - web application framework
• Prisma - toolkit that simplifies database access and model management
• Text | Design System - shared components library
• Text Platform | Developer CLI - terminal tool for managing app like in Developer Console
• Text Platform | Developer UI - library that provides useful wrappers for:
  • Text Platform App (@developer-sdk)
  • Text Products widgets (@agent-app-sdk, @helpdesk-sdk)

The template consists of:

• layout that wraps all app pages and utilizes Text Platform | Developer UI to provide cross-app access to Text Platform App instance with all of built-in features like reporting
• page for LiveChat Details widget - server component that loads current customer from database (if was already saved)
  • widget - client component that presents current customer details and triggers server actions to save or remove it from database
• page for LiveChat Fullscreen widget - server component that loads all saved customers from database
  • widget - client component that presents list of saved customers and option to delete customer using server actions to manage
• livechat.config.json - contains app manifest that is used by Text Platform | Developer CLI to manage app
• database
  • client - contains Prisma client which is used by server components and server actions to read and write to database
  • schema - Prisma schema file that contains data model for app and specifies how it maps to the underlying database

🚀 Getting Started

First, ensure that latest version of Text Platform | Developer CLI is installed on your machine:

npm i -g @livechat/developer-cli

Then, install dependencies:

npm install

Next, pull latest version of your app manifest:

txdev app pull

You can display your app in Developer Console:

txdev app open

or start local development server running:

npm run dev

⚙️ Available Scripts

dev

Runs the app in the development mode. Open http://localhost:3000 to view it in your browser. The page will reload when you make changes. You may also see any lint errors in the console.

Before running your dev environment don't forget you generate your database models and apply migrations:

npm run generate
npm run migrate

Keep in mind that Prisma need access to your DATABASE_URL in .env file. Prepare it manually or used txdev app vars pull command.

build

Builds the app for production to the .next folder.

start

Starts production ready Next.js web server.

🧑‍💻 Text Platform: who are we?

Behind Text, there’s a team of passionate people building online customer service software with online chat, help desk software, chatbot, and web analytics capabilities.

With a suite of five products (LiveChat, ChatBot, HelpDesk, KnowledgeBase, and OpenWidget) and their powerful APIs, we power customer communication for 36,000 companies in 150 countries.

The Platform is a range of products and services that can be used to build a variety of communication tools for businesses. Our Developer Program and Marketplace create an open ecosystem for developers, partners, and customers. With our advanced APIs and comprehensive documentation, you can shape the future of communication with us — starting today.

Join our Discord to learn, get inspired, and meet other developers!