1. Install

Steps to integrate Velt into an existing app

React / Next.js with Hooks

1. Install React package

   npm:

   npm install @veltdev/react
   

   yarn:

   $ yarn add @veltdev/react
   
2. Install types (optional)

   If you’re using TypeScript, you can install the types package.

   npm install --save-dev @veltdev/types
   
3. Grab your Velt API Key

   Go to console.velt.dev and grab your Velt API Key

   
4. Safelist your domain

   In the Velt console, add the URL where your app is deployed to the list of Managed Domains.

   
5. Add the VeltProvider

   Add the VeltProvider component to the root of your app.

   Add your Velt API key.

   import { VeltProvider } from '@veltdev/react';
   

   <VeltProvider apiKey="YOUR_API_KEY">
     <YourRootComponent/>
   </VeltProvider>
   
6. (Next.js only) Add 'use client' to your root component

   'use client'
   
   import { VeltProvider } from '@veltdev/react';
   
   <VeltProvider apiKey="YOUR_API_KEY">
     <YourRootComponent/>
   </VeltProvider>
   

React / Next.js

We recommend following the setup guide that uses React / Next.js with Hooks for a cleaner experience.

1. Install React package

   npm:

   npm install @veltdev/react
   

   yarn:

   $ yarn add @veltdev/react
   
2. Install types (optional)

   If you’re using TypeScript, you can install the types package.

   npm install --save-dev @veltdev/types
   
3. Grab your Velt API Key

   Go to console.velt.dev and grab your Velt API Key

   
4. Safelist your domain

   In the Velt console, add the URL where your app is deployed to the list of Managed Domains.

   
5. Add the VeltProvider

   Add the VeltProvider component to the root of your app.

   Add your Velt API key.

   import { VeltProvider } from '@veltdev/react';
   

   <VeltProvider apiKey="YOUR_API_KEY">
     <YourRootComponent/>
   </VeltProvider>
   
6. (Next.js only) Add 'use client' to your root component

   'use client'
   
   import { VeltProvider } from '@veltdev/react';
   
   <VeltProvider apiKey="YOUR_API_KEY">
     <YourRootComponent/>
   </VeltProvider>
   

HTML

1. Grab your Velt API Key

   Go to console.velt.dev and grab your Velt API Key

   
2. Safelist your domain

   In the Velt console, add the URL where your app is deployed to the list of Managed Domains.

   
3. Import the Velt Script tag

   <script type="module" src="https://cdn.velt.dev/lib/sdk@latest/velt.js" onload="loadVelt()"></script>
   
4. Initialize with your API Key

   Put this in your root app script:

   async function loadVelt() {
       await Velt.init("YOUR_VELT_API_KEY");
   }
   

Angular

1. Install client library

   npm i @veltdev/client
   
2. Install types library (optional)

   If you are using Typescript, install the types library:

   npm i @veltdev/types --save-dev
   
3. Grab your Velt API Key

   Go to console.velt.dev and grab your Velt API Key

   
4. Safelist your domain

   In the Velt console, add the URL where your app is deployed to the list of Managed Domains.

   
5. Add Custom Elements Schema in App Module

   Add schemas: [CUSTOM_ELEMENTS_SCHEMA] to your App Module:

   import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule
     ],
     providers: [],
     bootstrap: [AppComponent],
     schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add this line
   })
   export class AppModule { }
   
6. Get the Velt Client

   import { initVelt } from '@veltdev/client';
   

   this.client = await initVelt('YOUR_APIKEY');
   

Vue.js

1. Install client library

   npm i @veltdev/client
   
2. Install types library (optional)

   If you are using Typescript, install the types library:

   npm i @veltdev/types --save-dev
   
3. Grab your Velt API Key

   Go to console.velt.dev and grab your Velt API Key

   
4. Safelist your domain

   In the Velt console, add the URL where your app is deployed to the list of Managed Domains.

   
5. Allow Velt Elements in Main.js

   In main.js, add the following code to allow Velt elements in your Vue app:

   Vue.config.ignoredElements = [
     /velt-*/
   ]
   
6. Get the Velt Client

   import { initVelt } from '@veltdev/client';
   

   client = await initVelt("YOUR_APIKEY");
   

React / Next.js with Hooks

'use client' // Add this line for Next.js only

import { VeltProvider } from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="YOUR_API_KEY">
      <YourRootComponent/>
    </VeltProvider>
  );
}