Schnittstelle

1. API-Key beantragen

Beantragen Sie einen API-Key, damit Sie den Service von COPPIO nutzen können.

Jetzt beantragen

2. Javascript einbinden

Binden Sie folgende Zeilen vor dem schließenen Body-Tag ein.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.coppio.de/system/api/coppio.min.js" data-app-key="Ihr API-Key"></script>

3. HTML-Tags setzen

Damit die API von COPPIO Ihre Bilder erkennt, die zur Entwicklung bereitgestellt werden sollen, müssen alle Bilder folgenden Tags haben.

data-coppio="image"
data-coppio-imgurl="linkzuihrembild"

Beispiel:

<img src="http://linkzuihrembild_thumbnail.de" alt="vorschau" data-coppio-imgurl="linkzuihrembild" data-coppio="image"/>

Sobald jetzt auf das Bild geklickt wird, erkennt COPPIO das Bild und speichert dieses ab. Das angeklickte Bild erhält zudem die Klasse ".coppio-img-active", sodass das ausgewählte Bild kenntlich gemacht werden kann. Beispielsweise so:

<style>
.coppio-img-active { border: 2px solid #333; }
</style>

4. Bilder übergeben

Zuletzt muss der Bestellen-Button noch eingefügt werden, dafür benutzen Sie bitte folgenden Code:

<div data-coppio="addImages">(<font data-coppio="counter">0</font>) Bestellen</div>