www.tchat.cafe irc.tchat.cafe
image

Ajouter un tchat à votre site

Accueil | Webmasters

Ajouter un tchat à vote site.

Ajouter ce code entre vos balises <head> et </head>

<script src="httpts://www.tchat.cafe/assets/js/chat.js type="text/javascript" >

Implementez le formulaire.

Le formulaire comporte 3 champs, dont seul le champ « Nom d'utilisateur » est obligatoire. Le champ « Mot de passe » est facultatif et le champ « Salle » peut être masqué. Vous pouvez modifier tous les attributs de ces champs, à l'exception de l'attribut « id ». Le bouton ou le lien de connexion est obligatoire et doit avoir la classe « tchat-connect ». Vous pouvez également modifier les autres attributs.

Champ pseudo

<input type="text" name="pseudo" id="tchat-pseudo" />

Champ salon

<input type="text" name="rooms" id="tchat-rooms" value="#MyRoomName" />
ou en hidden
<input type="hidden" name="rooms" id="tchat-rooms" value="#MyRoomName" />

Champ langue

Spécifie la langue dans laquelle vous trouverez l'application de tchat.
Valeurs possibles (indiquez la valeur entre guillemet) :
  • "fr" (Français)
  • "en" (Anglais)
  • "it" (italien)
  • "de" (Allemand)
  • "es" (Espagnol)
  • "sv" (Suédois)
  • "no" (Norvegien)
<input type="hidden" name="lang" id="tchat-lang" value="fr" />

Boutton de connexion au chat

Le boutton connection permet d'ouvrir la fenetre de tchat.Le boutton doit comporter la classe css 'tchat-connect' (class='tchat-connect'')
<button class="tchat-connect" type="button" name="tchat-connect" id="tchat-connect"> Connection au chat </button>

Exemple d'intégration

exemple 1






<div class="form">
    <label>Pseudo:</label>
    <input type="text" name="pseudo" id="tchat-pseudo" />
    <br />
    <label>Mot de passe:</label>
    <input type="text" name="pseudo" id="tchat-password" />
    <br />
    <label>Salon:</label>
    <input type="text" name="pseudo" id="tchat-rooms" value="#cafe" />
    <br /><br />
    <div  class="justify-end"> 
        <br />
        <input type="hidden" id="tchat-lang" value="it" />
        <button class="tchat-connect">Se connecter au tchat</button>
    </div>    
    <br />    
</div>
aucun css
exemple 2



<div class="form-round">
    <label>Pseudo:</label>
    <input class="maxsize" type="text" name="pseudo" id="tchat-pseudo" />                                                                        
    <input type="hidden" name="rooms" id="tchat-rooms" value="#cafe" />
    <input type="hidden" id="tchat-lang" value="<?=$locale?>" />
    <br /><br />
    <button class="tchat-connect">Se connecter au tchat</button>
    <br />                               
</div>                                
maxsize {
    width:100%;
}
div.form-round {
    background-color: #030bfc;
    border-radius: 50px;
    color: white;
    padding: 1rem;
    text-align: center;
)
exemple 3



<div class="maxsize form-round">
    <div>
        <label>Pseudo :</label>
        <br />
        <input class="col-12" type="text name="pseudo" id="tchat-pseudo" />                                                                
    </div>    
    <div>
        <label>Salons :</label>
        <br />
        <input class="col-12" type="text name="rooms" id="tchat-rooms" value="#cafe"/>                                
    </div>
    <br />
    <div  class="justify-end">                            
        <input type="hidden" id="tchat-lang" value="<?=$locale?>" />
        <button type="button" class="tchat-connect">Se connecter au tchat</button>                            
    </div>    
</div>    
                                

maxize {
    width:100%;
}
div.form-round {
    background-color: #030bfc;
    border-radius: 50px;
    color: white;
    padding: 1rem;
    text-align: center;
)
exemple 4



<div class="maxsize form">
<div>
    <label>Pseudo :</label>
    <br />
    <input class="col-12" type="text" name="pseudo" id="tchat-pseudo" />                                                                
</div>    
<div>
    <label>Mot de passe :</label>
    <br />
    <input class="col-12" type="text" name="password" id="tchat-password" />                                
</div>
<br />
<div  class="justify-end">                                        
    <input type="hidden" name="rooms" id="tchat-rooms" value="#cafe" />
    <input type="hidden" id="tchat-lang" value="<?=$locale?>" />
    <button type="button" class="tchat-connect">Se connecter au tchat</button>                            
</div>    
</div>    
    
                            
maxize {
    width:100%;
}