[Alpha Release] Messaging Widget

2 comments

peak.open850.38last yearPeakD3 min read

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.

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.

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 @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:

PeakD: https://peakd.com/proposals/223
Hive.blog: https://wallet.hive.blog/proposals
Ecency: https://ecency.com/proposals/223
Or directly on Hivesigner

BENEFICIARY
You can donate 5% of your Hive Reward Pool earnings to @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:

Share on posts #HiveLaunchpad or #PeakOpenProjects
Reach out on this discord channel
Create a suggestion on our new feature voting site https://feedback.peakd.com -- use category "Peak Open Projects"

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

Hashtags 9

10.63