peak.open avatar

[Alpha Release] Messaging Widget

peak.open

Published: 03 May 2023 › Updated: 03 May 2023[Alpha Release] Messaging Widget

[Alpha Release] Messaging Widget

messaging_widget.png

Around month ago PeakD String chat have been released for alpha testing. If you haven't given it a try, feel free to visit https://chat.peakd.com and check out the previous announcement post.

Today is the alpha release day for the messaging widget. This post will serve as a tutorial on how to add it with few steps and optionally customize it in the widget editor.

customize the widget in editor

About the messaging widget:

  • Supports encrypted direct & group messages
  • Community chat channels
  • Keychain login/guest account
  • Customizable UI
  • Themes

How to add messaging widget to a website

Step 1. stwidget.js lib

Download and host (preferred) or add script: https://chat.peakd.com/stwidget.js (Also available on gitlab)

Step 2. Use the generated code from Widget Editor or from the example below:

Generate the code with customization through the widget editor or copy the example on how to embed the widget with JavaScript shown below.

<!DOCTYPE html>
<html>
  <head>
    <script src="stwidget.js"></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Widget Embed Example</title>
  </head>
  <body> 
    <p>Widget Embed example</p>
    <div id="customDiv"></div>
    <p>You can further customize by tweaking properties. Check out the 
        <a href="https://chat.peakd.com/widgettest">property editor</a>, send feedback and 
        feature requests in the chat window above or 
        <a href="https://chat.peakd.com/t/hive-163399/0">open in new window.</a></p>
    <script>
        var stwidget = new StWidget('https://chat.peakd.com/t/hive-163399/0');
        stwidget.properties = { "requireLogin": false, "sidebar": 2};    
        var element = stwidget.createElement('450px', '556px', false/*overlay*/, true /*resizable*/);

        document.getElementById("customDiv").appendChild(element);
    </script>
  </body>
</html>

The code example above and other examples on how to overlay the widget and show/hide it on a click of a button in JavaScript or Vue are available here.

Further Customization

Feel free to post customization ideas in the chat: https://chat.peakd.com/t/hive-163399/0

Alternatively

Clone the open source frontend repository and host the widget on your domain to customize it as you see fit.

While not alpha released yet, there is a frontend/backend library that can be used to communicate with the messaging backend nodes to read and post messages.

Selection_298.png

How to support Peak Open Project

WORK WITH US
If you're a project looking to integrate one of these tools message us.
If you're a developer looking for a part time open source project message us.

WITNESS VOTE
Part of the team has been voted as a top block producer on hive (aka "witness"). You can add your vote for us on the main witness page our "witness" account is steempeakHive account@steempeak

VOTE HERE: https://peakd.com/witnesses

OPEN PROJECTS PROPOSAL
You can support our proposal to develop open source tools for the whole Hive community using one of the following links:

BENEFICIARY
You can donate 5% of your Hive Reward Pool earnings to peakdHive account@peakd to help use improve the interface: Turn on in settings

SHARE IDEAS AND FEEDBACK
We invite you to share and brainstorm some ideas with us:

The PeakD Team
About us: https://peakd.com/about
Discord - Blog - Twitter - LinkedIn

Leave [Alpha Release] Messaging Widget to:

Written by

Read more #hivelaunchpad posts

Best Posts From peak.open

We have not curated any of peak.open's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From peak.open