# In-App Tutorials

> **Source**: [Wiki](https://help.trainn.co/yDNi2PB4MIQ-in-app-tutorials)
>
> <p>Introducing In-App Tutorials. Trainn’s no-code solution to deliver videos and guides directly inside your product, right where your users need them!</p>

## Browse Collection

1. [Trainn User Identity API Documentation](https://help.trainn.co/yDNi2PB4MIQ-in-app-tutorials/OBYwhUrd1QA-trainn-user-identity-api-documentation.md) (Article)
2. [Setup & Installation](https://help.trainn.co/yDNi2PB4MIQ-in-app-tutorials/hujSnetwQYQ-setup-installation.md) (Article)
3. [Setup for frameworks (Vue, React, Angular)](https://help.trainn.co/yDNi2PB4MIQ-in-app-tutorials/11kqrTSm2G8-setup-for-frameworks-vue-react-angular.md) (Article)
4. [Introducing In-App Tutorials](https://help.trainn.co/yDNi2PB4MIQ-in-app-tutorials/5aE8ZlIIjjg-introducing-in-app-tutorials.md) (Video)
5. [Top 4 Places for In-App Tutorials](https://help.trainn.co/yDNi2PB4MIQ-in-app-tutorials/At5C9H6LQdY-top-4-places-for-in-app-tutorials.md) (Article)
6. [Understanding URL Variables ](https://help.trainn.co/yDNi2PB4MIQ-in-app-tutorials/NizpCj2i50g-understanding-url-variables.md) (Article)
7. [Understanding In-App Tutorial Limits](https://help.trainn.co/yDNi2PB4MIQ-in-app-tutorials/tebQQXa2Jzk-understanding-in-app-tutorial-limits.md) (Article)

---

# ARTICLE: Setup for frameworks (Vue, React, Angular)

## METADATA

- id: uiznJMYVAkjHv16bp4WzDQ
- type: article
- source: Wiki
- content_url: https://help.trainn.co/yDNi2PB4MIQ-in-app-tutorials/11kqrTSm2G8-setup-for-frameworks-vue-react-angular

- collection_url: https://help.trainn.co/yDNi2PB4MIQ-in-app-tutorials

## CONTENT

### Vue 3

```
<script setup lang="ts">
import { onMounted } from 'vue';

function loadTrainn() {
  if (!window.Trainn) {
    window.Trainn = (...args: any[]) => {
      (window.Trainn.q ||= []).push(args);
    };
  }

  if (!document.getElementById('trainn-script')) {
    const s = document.createElement('script');
    s.id = 'trainn-script';
    s.defer = true;
    s.src = 'https://js.trainn.co/v2/index.js';
    document.head.appendChild(s);
  }

  window.Trainn('init', { workspace: '<workspace-name>' });
}

onMounted(loadTrainn);
</script>```

Please check the provided[ CodeSandbox](https://codesandbox.io/p/devbox/szd7dt?embed=1&file=%2Fsrc%2FApp.vue) for a working example.

### 
React

```
import { useEffect } from 'react';

function loadTrainn() {
  if (!window.Trainn) {
    window.Trainn = (...args) => {
      (window.Trainn.q ||= []).push(args);
    };
  }
  if (!document.getElementById('trainn-script')) {
    const s = document.createElement('script');
    s.id = 'trainn-script';
    s.defer = true;
    s.src = 'https://js.trainn.co/v2/index.js';
    document.head.appendChild(s);
  }
  window.Trainn('init', { workspace: '<workspace-name>' });
}

export function App() {
  useEffect(() => {
    loadTrainn();
  }, []);

  return <div>My App</div>;
}```

### Angular 2+

trainn-loader.service.ts

```
import { Injectable } from '@angular/core';

declare global {
  interface Window {
    Trainn?: any;
  }
}

@Injectable({ providedIn: 'root' })
export class TrainnLoaderService {
  loadTrainn() {
    if (!window.Trainn) {
      window.Trainn = (...args: any[]) => {
        (window.Trainn.q ||= []).push(args);
      };
    }

    if (!document.getElementById('trainn-script')) {
      const s = document.createElement('script');
      s.id = 'trainn-script';
      s.defer = true;
      s.src = 'https://js.trainn.co/v2/index.js';
      document.head.appendChild(s);
    }

    window.Trainn('init', { workspace: '<workspace-name>' });
  }
}```

If you need help integrating Trainn in any other language or framework, please **contact support.**