Define window.CocolisWidget before loading the script. The
button will appear fixed at the bottom-right of the page.
<script>
window.CocolisWidget = {
partnerName: "my-shop",
// mode defaults to "floating"
};
</script>
<script src="https://widget.cocolis.fr/bootstrap.iife.js"></script>
Set mode: "inline" and provide a container CSS
selector to mount the button inside a specific element instead of floating.
If container is omitted, the widget falls back to
"floating" mode.
<div id="cocolis-inline-container"></div>
<script>
window.CocolisWidget = {
partnerName: "my-shop",
mode: "inline",
container: "#cocolis-inline-container",
};
</script>
<script src="https://widget.cocolis.fr/bootstrap.iife.js"></script>
window.CocolisWidget = {
// Layout
partnerName: "my-shop", // required
mode: "floating",
// "floating" (default) | "inline"
container: "#my-element",
// CSS selector for inline mode.
// Falls back to "floating" if omitted.
// Pre-fill sender
fromPostcode: "75001",
fromCity: "Paris",
fromCountryAlpha2: "FR",
fromStreet: "1 rue de Rivoli",
fromDetails: "Bâtiment A",
fromName: "Ma Boutique",
fromFirstname: "Jean",
fromLastname: "Dupont",
fromEmail: "[email protected]",
fromPhone: "0600000000",
fromLat: 48.8566,
fromLng: 2.3522,
// Pre-fill recipient
toPostcode: "69001",
toCity: "Lyon",
toCountryAlpha2: "FR",
toStreet: "1 place Bellecour",
toDetails: "Appartement 4",
toFirstname: "Marie",
toLastname: "Martin",
toEmail: "[email protected]",
toPhone: "0600000001",
toLat: 45.7676,
toLng: 4.8344,
// Package
format: "m",
// "s" | "m" | "l" | "xl" | "xxl"
weight: "less_than_5_kg",
// "less_than_5_kg" | "between_5_and_30_kg"
// "between_30_and_50_kg" | "between_50_and_100_kg"
// "more_than_100_kg"
// Item
title: "Mon produit",
externalId: "SKU-123",
externalDescription: "Description du produit",
photoUrls: ["https://example.com/photo.jpg"],
insuranceValue: 500,
// Behaviour
hideEmail: false,
hideCloseButton: false,
};
Or you can use the form directly in an iframe.
See the demo page for the iframe
here.