> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How can I embed Crisp inside a single-page app?

****Crisp provides a Web SDK that provides Typescript bindings for the Crisp chatbox.****

This method is preferred when including Crisp in a single-page apps using Frameworks such as Angular, VueJS, React, NuxtJS or NextJS.

# Getting started

|| 👉 The full [Crisp Web SDK documentation](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/npm/) is available on our Developer Hub.

## Installation

`` `npm install --save crisp-sdk-web` ``

## Basic Implementation

To add Crisp on your website, you will first need to create an account from the [Crisp App](https://app.crisp.chat/initiate/signup/).

Once you have your Crisp ****Website ID****, you can then embbed Crisp in your app.

```
import { Crisp } from "crisp-sdk-web";Crisp.configure(WEBSITE_ID);// Crisp will be displayed
```

## Manual loading

Deferring Crisp loading is possible, for instance, to display the chat after a login screen or custom button.

```
import { Crisp } from "crisp-sdk-web";Crisp.configure(WEBSITE_ID, {  autoload: false});Crisp.load()
```