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