Skip to main content

Framework Integration

The <senda-chat> Web Component works in any framework.

React​

function App() {
  return (
    <div>
      <h1>My App</h1>
      {/* @ts-ignore — custom element */}
      <senda-chat 
        api-key="sk_live_YOUR_KEY" 
        space="soporte"
        title="Help Center"
      />
    </div>
  );
}
tip

Add the script tag in your index.html <head>:

<script src="https://senda.telar.ai/widget/v1/senda.js"></script>

Vue​

<template>
  <div>
    <h1>My App</h1>
    <senda-chat 
      api-key="sk_live_YOUR_KEY" 
      space="soporte"
    />
  </div>
</template>

<script setup>
// In vite.config.ts, tell Vue to treat senda-chat as a custom element:
// vue({ template: { compilerOptions: { isCustomElement: tag => tag === 'senda-chat' } } })
</script>

Angular​

// In app.module.ts
@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
<senda-chat api-key="sk_live_YOUR_KEY" space="soporte"></senda-chat>

Plain HTML​

<!DOCTYPE html>
<html>
<head>
  <script src="https://senda.telar.ai/widget/v1/senda.js"></script>
</head>
<body>
  <h1>My Website</h1>
  <senda-chat api-key="sk_live_YOUR_KEY" space="soporte"></senda-chat>
</body>
</html>