# Erste Schritte
Damit du Storytellr.js nutzen kannst, musst du die Bibliothek in dein Projekt integrieren. Du hast dafür zwei Möglichkeiten. Entweder kannst du die Bibliothek herunterladen und dann in dein Projekt integrieren, oder du kannst ein Content Delivery Network (kurz CDN) nutzen.
# Download
Wenn du Storytellr.js lokal in dein Projekt einbinden möchtest, dann kannst du die Bibliothek hier herunterladen.
# Quick start
- Kopiere den folgenden CSS
<link>in den<head>Bereich deiner Webseite.
CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/storytellr.js@1.0.0/storytellr.min.css">
1
Lokal
<link rel="stylesheet" href="../path/to/storytellr.min.css">
1
- Kopiere den folgenden
<script>Code und füge ihn vor deinem schliessenden</body>Tag ein.
CDN
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/storytellr.js@1.0.0/storytellr.min.js"></script>
1
Lokal
<script type="text/javascript" src="../path/to/storytellr.min.js"></script>
1
# Starter-Template
Möchtest du keine Zeit verschwenden und direkt mit dem Entwickeln deiner Storytelling-Webseite starten? Dann nutze das Starter-Template.
Du kannst den Code kopieren und nach deinen eigenen Vorstellungen anpassen.
```html
<!doctype html>
<html lang="de-CH">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title>Storytellr.js</title>
<meta name="description" content="Die JavaScript-Bibliothek für Geschichtenerzähler" />
<meta name="keywords" content="Storytellr.js, MMP-Storytelling, Storytelling im Web" />
<!-- Open Graph Tags für Facebook -->
<meta property="og:title" content="Storytellr.js" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://storytellr.netlify.app/" />
<meta property="og:image" content="https://storytellr.netlify.app/assets/logo/storytellr-social-logo.png" />
<meta property="og:description" content="Die JavaScript-Bibliothek für Geschichtenerzähler" />
<meta property="og:site_name" content="Storytellr.js" />
<!-- Twitter Card für Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Publisher">
<meta name="twitter:title" content="Storytellr.js">
<meta name="twitter:description" content="Die JavaScript-Bibliothek für Geschichtenerzähler">
<meta name="twitter:creator" content="@Autor">
<meta name="twitter:image" content="https://storytellr.netlify.app/assets/logo/storytellr-social-logo.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/storytellr.js@1.0.0/storytellr.min.css">
</head>
<body>
<header class="story-header">
<h1 class="story-text-h1">Titel</h1>
<h2 class="story-text-h2">Untertitel</h2>
</header>
<main class="story-container">
<section class="story-section">
<h3 class="story-text-h3">Deine Section</h3>
</section>
</main>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/storytellr.js@1.0.0/storytellr.min.js"></script>
<script>
// Aufruf der Storytellr-Funktionen
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48