Add a chat to your website

Insert the following line between your <head> and </head>-tags.

Implement the form.

The form consists of 3 fields, of which only the username field is required. The password field is optional, and the room field can be set to hidden. You can change all attributes of these fields except the id attribute. The login button or link is required and must have the 'tchat-connect' class. You can also change the other attributes.

Nickname field

Room field

or in hidden

Lang field

Specifies the language in which you will find the chat application.
Possible values (enter the value in quotation marks) :

"fr" (French)
"en" (English)
"it" (Italian)
"de" (Deutch)
"es" (Spanish)
"sv" (swedish)
"no" (Norwegian)

Tchat connection button

The connection button opens the chat window.
The button must include the CSS class 'tchat-connect' (class='tchat-connect'')

<button class="tchat-connect" type="button" name="tchat-connect" id="tchat-connect"> Connection au chat </button>

Integration example

example 1

Nickname:
password:
Rooms:

<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="textwhite tchat-connect">Se connecter au tchat</button>
    </div>    
    <br />    
</div>

aucun css

example 2

Nickname :

<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="textwhite 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;
)

example 3

Nickname :

Rooms :

<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="textblack 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;
)

example 4

Nickname :

password :

<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%;
}