Legg til en chat på nettstedet ditt.

Legg til linjen mellom taggene dine <head> og </head>.

Implementer skjemaet

Skjemaet inneholder 3 felt, hvorav feltet «Brukernavn» er obligatorisk. Feltet «Passord» er valgfritt, og feltet «Rom» kan settes til skjult. Det er mulig å endre alle attributtene til disse feltene, bortsett fra attributtet «id». Knappen eller lenken for innlogging er obligatorisk og inkluderer klassen «tchat-connect». Det er også mulig å endre de andre attributtene.

Brukernavnfelt“

Romfelt

eller i hidden

Språkfelt

Angir språket du vil finne chatapplikasjonen på.
Mulige verdier (angi verdien i anførselstegn) :

"fr" (Fransk)
"en" (Engelsk)
"it" (Italiensk)
"de" (Tysk)
"es" (Spansk)
"sv" (Svensk)
"no" (Norsk)

Chat-påloggingsknapp

Tilkoblingsknappen åpner chatvinduet.
Knappen må inneholde CSS-klassen 'tchat-connect' (class='tchat-connect'')

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

Integrasjonseksempel

eksempel 1

Brukernavn:
Passord:
Chattrum:

<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

eksempel 2

Brukernavn :

<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;
)

eksempel 3

Brukernavn :

Chattrum :

<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;
)

eksempel 4

Brukernavn :

Passord :

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