@ft_bankkeys/phone-linker

Détecte automatiquement les numéros de téléphone français dans le DOM et les rend cliquables pour déclencher un appel via le dialer Ringover.

Installation

npm install @ft_bankkeys/phone-linker

Configuration

1. Ajouter l'URL de l'application dans .env

RINGOVER_APP_URL=https://mon-app.com

Si la variable est absente, le fallback est http://localhost:8080.

2. Exposer la variable via webpack (webpack.mix.js)

const webpack = require('webpack');
require('dotenv').config();

mix.webpackConfig({
    plugins: [
        new webpack.DefinePlugin({
            RINGOVER_APP_URL: JSON.stringify(process.env.RINGOVER_APP_URL || 'http://localhost:8080'),
        }),
    ],
});

3. Initialiser dans app.js

import { autoInit } from '@ft_bankkeys/phone-linker';

autoInit({ dialerUrl: RINGOVER_APP_URL + '/dialer' });

C'est tout. Le script détectera automatiquement tous les numéros français présents sur la page et les rendra cliquables au chargement.

Formats de numéros détectés

| Format | Exemple | |--------|---------| | International avec espaces | +33 6 12 34 56 78 | | International sans séparateur | +33612345678 | | Local avec espaces | 06 12 34 56 78 | | Local sans séparateur | 0612345678 | | Séparateurs . ou - | 06.12.34.56.78 / 06-12-34-56-78 |

API

import { linkPhoneNumbers, callPhone, normalizeNumber, autoInit } from '@ft_bankkeys/phone-linker';

// Scan manuel d'un élément spécifique
linkPhoneNumbers({
    dialerUrl: 'https://mon-app.com/dialer',
    root: document.querySelector('#ma-section'), // optionnel, défaut: document.body
    buttonClass: 'mon-style',                    // optionnel, défaut: 'phone-link'
});

// Appeler un numéro directement
callPhone('+33612345678', 'https://mon-app.com/dialer');

// Normaliser un numéro en E.164
normalizeNumber('06 12 34 56 78'); // → "+33612345678"

Style par défaut

Le package injecte automatiquement un style CSS pour la classe .phone-link :

• Couleur bleue (#2563eb)
• Soulignement pointillé
• Couleur plus sombre au survol

Pour surcharger, définissez .phone-link dans votre propre CSS après le chargement du script.

Usage CDN (sans bundler)

<script>window.DIALER_URL = 'https://mon-app.com/dialer';</script>
<script src="phone-linker.umd.js"></script>

Le script s'auto-initialise dès le chargement.