Squeezer


Widget ?

Le Widget Squeezer est un composant permettant d’afficher le formulaire de download dl.Squeezer sur un site, via l’insertion d’un code sur une page.

Exemple :

Mise en place

Dans la page cible, placez le code suivant :

<script type="text/javascript" src="http://dl.squeezer.fr/widget"></script>
<div class="squeezer-widget"></div>

Le script peut être placé entre les balises <head> de la page ou en fin de page.

Le conteneur du widget <div class="squeezer-widget"></div> sera placé à l’endroit où le widget devra s’afficher.

IMPORTANT

La class squeezer-widget permet au script d’identifier le div cible.
Celle-ci ne doit pas être changée.

Conseils de mise en place

Le widget adopte la taille de son conteneur, avec une limite de 500px de large.
Son conteneur peut ainsi être une colonne ou un bloc responsive de 50% de large.

Les éléments du widget (input, bouton) sont translucides.
En associant couleur de fond du conteneur du widget et attribut permettant de rendre le fond transparent, divers styles sont possibles

Personnalisation

Des attributs permettent de personnaliser l’apparence du widget.
Ils sont à ajouter au div et se présentent sous la forme d’attributs HTML5 standard.

Exemple de personnalisation :

<div class="squeezer-widget" data-theme="dark" data-background="false"></div>

Attribut

Valeurs

Description

data-theme

dark

light

Apparence globale du widget. dark sera utilisé si le bloc conteneur du widget possède un fond foncé.

data-lang

fr

en

Langue des éléments textuels du widget.

L’anglais est la langue par défaut.

data-background

false

Désactive la couleur de fond du widget. Le fond devient transparent.

data-placeholder-name

Texte

Texte d’invite de saisie du nom affiché dans le champ « name » lorsqu’aucun nom n’est saisi.

Si ce paramètre n’est pas défini, la valeur par défaut s’affichera.

data-placeholder-email

Texte

Texte d’invite de saisie de l’adresse email affiché dans le champ « email» lorsqu’aucun nom n’est saisi.

Si ce paramètre n’est pas défini, la valeur par défaut s’affichera.

data-submit-label

Texte

Texte du bouton d’envoi du formulaire.

Si ce paramètre n’est pas défini, la valeur par défaut s’affichera.




Contact