[Alpha Release] Messaging Widget

in HiveDevs • last year

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

#hivelaunchpad #peakopenprojects #peakd #messaging #sting #dev #hive-dev #hdf #peakprojects
last year in HiveDevs by
$10.63
76 votes
Reply 2
Sort:  
  • Trending
    • [-]
     last year  

    This is a really excellent app, I think not many people in Hive know about it. But this app could replace Discord for us Hive users in the future. Congratulations and thank you for your work.

    [-]
     last year  

    Congratulations @peak.open! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

    You received more than 1000 HP as payout for your posts, comments and curation.
    Your next payout target is 2000 HP.
    The unit is Hive Power equivalent because post and comment rewards can be split into HP and HBD

    You can view your badges on your board and compare yourself to others in the Ranking
    If you no longer want to receive notifications, reply to this comment with the word STOP

    Check out our last posts:

    The Hive Gamification Proposal
    Support the HiveBuzz project. Vote for our proposal!
    $0.00
      Reply