Forum - RE: Kleine Quasselbox fürs Forum - Shoutbox - 3

Ja, die speechbox kann man überall einbauen.

Zum Einbauen in der eigenen Seite den Code von speechbox verwenden. Zum Einbau eigene Seite, eigene Seite, neue Seite anlegen, runterscrollen und Editor ausschalten, dann weitere Einstellungen ein-/ausblenden, Diese Seite als Template inkl. Template Variablen ausführen haken dran.

Dan Code eingeben von www.speechbox.de: ich habe hier meine persönliche ID ausgeblendet.

<!-- www.speechbox.de: Beginn Code -->
<div class="speechbox-widget" data-boxid="#" data-width="240" data-height="640"></div>
<script async src="//www.speechbox.de/assets/js/widget.js" charset="utf-8"></script>
<!-- www.speechbox.de: Ende Code -->
 

Oben bei Seite noch Name angeben und dann Speichern. Wen gewünscht noch verlinken die Seite.

Wer noch möchte, kann die speechbox noch verschönern und was drumherum basteln

Ich habe bei speechbox für 1 Jahr bezahlt, 15 euro habe auf der Seite selbst viele Möglichkeiten mit Einstellungen und so bin da Premium-Mitgliedschaft und ist komplett werbefrei.


Nette Grüße

Daishi

Oh! Vielen dank, jetzt hat es geklappt. :3
Weißt du vielleicht auch, warum dieser Code in einem Hover z. B. nicht angezeigt wird?

Hallo Bienchen, sorry, dass ich mich so spät melde, bin dabei für dich das mit Hover Effekt zu basteln.

Warum es nicht angezeigt wird, liegt an dem Schreiben des Scripts, und den Formulierungen der Classes, und JavaScript.

Aktualisiert 02.10.2023

Hallo Bienchen, habe es hinbekommen, habe es als Plugin gemacht, das es unten rechts als Chatpunkt gemacht. Sobald man draufklickt, Hovert sich ein Fenster hoch.

Zu sehen in Live im Forum:

Kleine Quasselbox fürs Forum - mit Hover - Funktion!

Ich hoffe, dass du es so gemeint hast.

Zur Installation in deinem Forum gehe so vor, in den Adminbereich, dann zu Plugins, dann auf Plugin-Entwicklung, dann ein neues Plugin erstellen, dann neues Element erstellen, dann Template erstellen, dann auf untere Leiste, dann auf Footer, bottom_Footer, dann dort den Code einfügen und speichern.

Hier der Code für die kleine Quasselbox fürs Forum:

<style>
 
@charset "UTF-8";
body {
  font-family: "Open Sans", sans-serif;
}
 
.chat-launcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  z-index: 9999;
  background: grey;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
}
.chat-launcher:before, .chat-launcher:after {
  font-family: FontAwesome;
  font-size: 34px;
  position: absolute;
  -webkit-transition: transform 180ms linear, opacity 130ms linear;
  transition: transform 180ms linear, opacity 130ms linear;
}
.chat-launcher:before {
  content: "\1F4AC";
  margin: 8px;
  opacity: 1;
  -webkit-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
}
.chat-launcher:after {
  content: "\1F4AC";
  margin: 8px 9px;
  opacity: 0;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.chat-launcher:hover {
  background: #f2edf2;
}
.chat-launcher.active:before {
  opacity: 0;
  -webkit-transform: rotate(70deg) scale(0);
  transform: rotate(70deg) scale(0);
}
.chat-launcher.active:after {
  opacity: 1;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
 
.chat-wrapper {
  height: 430px;
  width: 385px;
  display: block;
  border-radius: 5px;
  background: #ebebeb;
  position: fixed;
  right: 20px;
  bottom: 110px;
  z-index: 999;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 22px rgba(0, 0, 0, 0.16);
  -webkit-transition: transform 400ms ease;
  transition: transform 400ms ease;
  -webkit-transform: translateY(130%);
  transform: translateY(130%);
}
.chat-wrapper:before {
  height: 3%;
  padding: 4%;
  font-size: 1.1em;
  line-height: 1em;
  display: block;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #666;
  color: white;
  content: attr(data-headline);
}
.chat-wrapper iframe {
  width: 94%;
  height: 84%;
  border: 0;
  border-radius: 5px;
  padding: 3%;
  overflow: hidden;
}
.chat-wrapper.is-open {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
  
</style>  
<div class="chat-launcher"></div>
<div class="chat-wrapper" data-headline="Quasselbox">
<!-- www.speechbox.de: Beginn Code -->
<div class="speechbox-widget" data-boxid="#" data-width="540" data-height="434"></div>
<script async src="//www.speechbox.de/assets/js/widget.js" charset="utf-8"></script>
<!-- www.speechbox.de: Ende Code -->
</div>
 
<script>
  
$(function () {
    $('.chat-launcher').on('click', function () {
        $('.chat-launcher').toggleClass('active');
        $('.chat-wrapper').toggleClass('is-open');
    });
});  
</script>      
 

data-boxid="#" 
 

Hallo Daishi!

Wow, das ist ja mega cool! Ich liebe es!
Kann man denn auch eine Grafik, statt der Sprechblase einbauen?

Liebe Grüße und einen schönen Feiertag euch <3

Aktualisiert 08.10.2023

Ja kann man, muss man dann auf die Größe anpassen, schlag mal ein Bild vor und ich passe es dafür an.

Das geht so:

content:url(pfad_zum_bild.jpg);
 

Darauf achten muss man das die Bilder 25 px x 25 px sind.


Wenn die Bilder zu groß sind, sieht das unschön aus.

Ich hoffe, ich konnte das so gut es geht erklären.

Zum Bilder hineinbauen einfach in Zeile 29, und 36 eingeben wie im Code beschrieben.

Das geht so zum Beispiel:

content:url(//files.homepagemodules.de/b906480/a_180_a8d1e703.png);
 

Für Bilder Anpassungen zum Zentrieren im Kreis:

Zur Bilder Anpassungen zum Zentrieren im Kreis einfach in Zeile 30, und 37 eingeben wie im Code beschrieben.

margin: 8px;
 

margin: 8px 9px;
 

Hier müsst ihr mit den Zahlen etwas spielen zwischen 6px bis 14px bis die Bilder, die ihr einfügt zentriert sind.

Zur Information, welche Bilder hier gehen,

    JPEG (oder JPG) – Joint Fotografic Experts Group
    PNG Portable Network Grafik
    GIF Grafik Interchange Format
    TIFF Tagged Image File
    SVG Scalable Vektor Graphics
    PSD Photoshop Dokument
    
    RAW Rohbildformate
 

Nette Grüße

Daishi

Du bist wirklich mein Held!! <3
Vielen vielen Dank Daishi!

Hallo Dashi

Kannst du noch schreiben, was für eine ID da rein kommt?
Wo finde ich die ID?

Danke

lg

Hallo Anne

Die Data Box-ID muss für das eigene Forum von www.speechbox.de über eine Anmeldung geholt werden!

Hier bei Zeile 101 nach "#" Raute einfügen.

data-boxid="#"
 

Ich habe bei speechbox für 1 Jahr bezahlt, 15 Euro. Habe auf der Seite selbst viele Möglichkeiten mit Einstellungen und so bin da Premium-Mitgliedschaft, es ist komplett werbefrei.

Hoffe ich konnte es so gut es geht erklären.

Obwohl ich den cbox Anbieter besser fand, hier war auch bei der kostenlosen Version keine Werbung. Man hatte nur, wenn man bezahlt bisschen mehr schnick schnack. Bin aber dann zu unserem Plugin talk unter Navi zurück gegangen.