> For the complete documentation index, see [llms.txt](https://missiveapp.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://missiveapp.com/docs/developers/fr/ui-iframe-integrations.md).

# Intégrations UI/iFrame

Créez des Intégrations UI personnalisées avec des iFrames qui interagissent avec Missive via l’API JavaScript.

## Intégrations iFrame

Vous pouvez développer votre propre intégration qui est injectée dans Missive avec une iframe qui peut interagir avec notre application via une bibliothèque JavaScript.

### Bibliothèque

Incluez ce script dans votre page d’intégration. Consultez le [API JavaScript](/docs/developers/fr/ui-iframe-integrations/javascript-api.md).

```html
<script src="https://integrations.missiveapp.com/missive.js"></script>
```

### Styles

Pour plus de commodité, nous fournissons également une feuille de style à inclure si vous souhaitez que votre intégration corresponde à nos styles. Non seulement cela accélère le développement, mais cela permettra également à votre intégration de prendre en charge tous nos thèmes par défaut. Découvrez notre [Guide de style CSS](https://integrations.missiveapp.com/styleguide/).

```html
<link href="https://integrations.missiveapp.com/missive.css" rel="stylesheet">
```

### Développement

`https` est nécessaire lors de l’ajout d’une intégration personnalisée à Missive. Pendant le développement, nous vous suggérons d’utiliser un outil comme [Caddy](https://caddyserver.com/) ou [Ngrok](https://ngrok.com/) pour créer un tunnel sécurisé vers votre serveur de développement local.

### Compatibilité iOS

Les Intégrations iFrame sont prises en charge sur iOS. Missive sur iOS est une application web chargée depuis `localhost`, ce qui la rend plus stricte concernant les en-têtes de sécurité iframe.

Si votre intégration se charge sur le Web et sur ordinateur, mais s’affiche vide sur iOS, vérifiez vos `Content-Security-Policy` en-têtes. Définir `frame-ancestors: *` provoquera l’échec de l’iframe sur iOS. Supprimez complètement la directive `frame-ancestors` pour autoriser le chargement depuis `localhost`.

### Débogage

Pour déboguer votre intégration, vous devez accéder à la console du navigateur :

1. Ouvrez la barre de commandes avec <kbd>⌘/Ctrl</kbd> + <kbd>K</kbd>
2. Recherchez `OPEN_DEV_TOOLS`
3. Sélectionnez la commande pour ouvrir les outils de développement du navigateur

Cela vous donne accès à la console complète du navigateur, où vous pouvez :

* Consulter la sortie de console.log de votre intégration
* Inspecter les erreurs et les traces de pile
* Déboguer le code JavaScript
* Observer les requêtes réseau
* Inspecter le DOM

## Sécurité

Il existe plusieurs façons de sécuriser votre iFrame :

{% stepper %}
{% step %}

#### Implémenter l’authentification à l’intérieur de l’iFrame (la plus sécurisée)

Implémentez la logique d’authentification directement dans votre iFrame afin que vos utilisateurs doivent se connecter avant de voir le contenu de l’iFrame.

Vous pouvez utiliser le stockage sécurisé de Missive pour conserver l’authentification :

```javascript
// Quand l’utilisateur doit s’authentifier
const token = await Missive.storeGet('auth_token')
if (!token) {
  // Afficher le formulaire de connexion
  // Après une connexion réussie :
  await Missive.storeSet('auth_token', 'user_token_12345')
} else {
  // Valider le token et afficher le contenu
}
```

* Les valeurs sont stockées par intégration et par utilisateur
* Les tokens persistent lors des rechargements de page
* Le stockage est géré de façon sécurisée par Missive et effacé à la déconnexion de l’utilisateur
  {% endstep %}

{% step %}

#### Passez un token dans les paramètres de l’URL de l’intégration (le plus simple)

Passez un token dans les paramètres de l’URL de l’intégration que votre serveur utilisera pour authentifier la requête avant de fournir le contenu de l’iFrame.

Exemple d’URL saisie dans Missive : <https://acme.com/my-iframe?auth=12345abcde>
{% endstep %}

{% step %}

#### Déléguez le flux OAuth à Missive avec initiateCallback (idéal pour les fournisseurs OAuth)

```javascript
async function authenticateWithOAuth() {
  try {
    // 1. Initiate OAuth flow
    const response = await Missive.initiateCallback('https://your-auth-endpoint')

    // 2. Response will contain query params from the OAuth redirect
    const { access_token } = response

    // 3. Store the token for future use
    await Missive.storeSet('oauth_token', access_token)
  } catch (error) {
    console.error('OAuth flow failed:', error)
  }
}
```

Fonctionnement :

* Missive ouvre l’URL d’authentification dans un nouvel onglet de navigateur
* Ajoute un `redirectTo` paramètre à votre URL
* Après la fin de l’OAuth, redirige vers la `redirectTo` URL avec vos jetons/données comme paramètres de requête
* L’onglet du navigateur se ferme automatiquement
* Votre intégration reçoit les données dans le `response` objet

Remarques importantes :

* Contourne les limites de l’OAuth dans les iFrames
* Compatible avec iOS (utilise localStorage au lieu des cookies)
* Le `redirectTo` URL est unique pour chaque tentative
* Stockez l’ `redirectTo` URL pendant les redirections OAuth

Rappelez-vous :

* Validez toujours les tokens sur votre serveur
* Utilisez HTTPS pour toutes les communications
  {% endstep %}
  {% endstepper %}

## Besoin d’aide pour créer votre intégration ?

Si vous n’avez pas les compétences techniques pour créer une intégration personnalisée, consultez notre [liste de partenaires](https://missiveapp.com/partners) de développeurs qui peuvent vous aider.

## Besoin de réponses plus précises ?

[Contactez-nous](/docs/developers/fr/contact.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://missiveapp.com/docs/developers/fr/ui-iframe-integrations.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.