Matt Finger
Invision Community Team
-
Joined
-
Last visited
Everything posted by Matt Finger
-
Yes, we'll do a separate blog post, probably in the Developer Blog, but we created an editor plugin system with the ability to add and position new toolbar buttons. -
We're discussing this internally still but there should be a way to restrict buttons by user and editor location in the final release That would be managed by the theme's CSS. We ended up keeping the background color the same once because a slightly darker/lighter color tended to look off in at least a few box color and dark/light mode combinations Probably not, but only because markdown code itself is not technically supported, rather we've included markdown style shortcuts. For example, if I pasted in "**some bold text**", it won't get converted to bold, it's only going to be converted after being typed out Yes! It uses color-mix and other CSS tricks to consistently adapt to the different theme colors.
-
In 2024, a secure WYSIWYG Editor has become a complex intricate thing. Copy/paste bundle files have largely been phased out in favor of complicated NPM repos and build tools. What was more or less just "HTML Manipulation" has evolved to abstract content models with dynamic rules on how to actually render the content to HTML. Then, for kicks, throw in the requirement that this editor needs to work in non-standard cases like the drag and drop page builder and live topics. The solution for Invision Community 5 is a new, custom, state of the art Editor built using ReactJS and Tiptap. In this article, I'll cover high level advantages, technical highlights and what's possible with 3rd party extensions. If you want to know more about the editor functionality, then see my other blog here. This story begins after we switched to CKEditor5 over a year ago. It is a decent product, but it had several serious limitations in a distributed platform like Community. We compared just about every editor currently on the market, and even considered building an editor completely from scratch, and ultimately landed on creating a custom editor using ReactJS and Tiptap. A lightweight package The v5 editor bundle size is small, coming to about 2mb in total (and it's split into separate chunks loaded ad-hoc, each one cached in the browser, so in practice much less data actually "loads"). After optimizing and tweaking CKEditor5, the smallest we could get it was over 50mb; now some build tool experts could probably wrangle that cke package to a smaller size, but I doubt it'd come anywhere close to Tiptap with all the features we added. It's also worth noting that, during operation, Tiptap had by far the lowest impact on browser memory consumption, and stubborn memory leaks never came up with this architecture. Part of this comes from taking advantage of ReactJS's stateful nature, but I think the most significant thing is that Tiptap doesn't have loose logic hanging around. How a modern WYSIWYG works (the short version) As I previously alluded to, editors today don't directly manipulate HTML at all. Instead, they store a Content Model according to a Schema. Different platforms may use different terms, but the content schema consists of the following Entities Nodes - Actual containers to put content in. Think blockquotes, headings or lists. Nodes are then stored in the document in a tree Text and Inline Nodes - Text is, well, text. It is exclusively just a string of characters; one way to think of it is, if it can go in a text message, it's text. Inline nodes, on the other hand, are not true "characters" but displayed inline with characters. Think custom emoticons and mentions. Marks - Styles and/or data that is applied over a range of text. Marks are similar to Nodes except that marks can overlap. For example, it if text is italic and bold, it makes no difference if it's bold inside italic or vise versa. Moreover, it it most accurate to simply say that text is just both italic and bold; this data is stored in Marks. In old editors, like CKEditor4, this was often just thrown into a "style" attribute which led to all sorts of issues and overhead processing. (These are not what CKEditor calls "marks" FYI, they call this concept "text attributes", in case anyone has existing CKE knowledge) All the above entities rely on Converters to generate them from HTML and then reconvert back into HTML. When the editor starts, it uses those converts to convert the initial data into the Content Model. Then, any change is made to the Content Model directly, which is continuously being converted back into HTML for the user to see. Security and Consistency The Schema and architecture add a layer of complexity but provide much better security, consistency and reliability because it only allows whitelisted content structures. For example, if I inserted something with the attribute style="color:white; transform: rotate(45deg)", the transform and color will be stripped out unless there's an existing converter to convert it to a Mark. Another example good example is simple bold styling: I can define several converters to parse the bold Mark: one for <b> tags, one for <strong> and one for style="font-weight: bold", and have them all convert back into a <strong> tag. Lastly, this gives us the assurance that, for any style, there is a user interface to manipulate and manage it. For this reason, source editing was removed because you won't ever need to fall back to source editing. I could go on for hours (seriously, don't get me started) but that's more than enough context to understand the rest of this article. Extending the Editor in Invision Another limitation of CKEditor5 in a distributed platform, where individual admins may want to customize, is that all Plugins have to be present at build not at runtime. This would pretty much mean no extending the editor, just rearranging the toolbar and flipping certain builtin features on and off. Fortunately, in Tiptap we were able to extend their internal node, mark and extension APIs. We'll have a more complete dev guide, but essentially all nodes, marks and extensions, which I'll just call "extensions" collectively, are rolled into the existing app system. There are 2 reasons we did this instead of just "buttons" like Invision 4, where you can just upload the CKEditor4 plugin zip file: It relies on using PHP to parse JavaScript to get things like the button title and stuff. If you create a valid plugin but define things in a slightly different way than expected, such as adding the name to the wrong line in the file, the plugin upload fails. Plugins/extensions are not buttons. Many CKE plugins have multiple buttons and many have none. This make management difficult because sometimes there isn't a button to remove and you have to reset all plugins, or you want to remove just one and 5 others disappear with it. Also, mostly all plugins add a new type of content; this type of content needs to be whitelisted Now, you may be thinking, "like the editor itself, won't the server side HTML Parser will strip any content that is not whitelisted"? Well, the answer is yes and we added a new AdminCP Dev Center tool to create Parser Whitelist Rules inside Invision Community Apps (again more on all this later). With the coupling of the Parser Whitelist and Editor Extensions, admins can rest assured that their editors will just "work" when you install Extensions. If you want to prematurely prepare to create Invision Community 5 Editor Extensions, have a look at Tiptap's Dev API Documentation, specifically the methods Node.create(), Mark.create() and Extension.create(). We've added wrappers for those three methods, in addition to an interface to add and position buttons in the toolbar. Please let me know if you have any questions! -
Invision Community 5 has a brand new editing experience powered by a lightweight, fast React text editor built for mobile and modern browsers. The venerable CKEditor v4 at the core of our current editor is starting to show its age, so we wanted a clean slate with Invision Community v5 with an editor that was optimized for mobile use, easily extensible and had a feature set that would take us into the next era of Invision Community and beyond. The obvious choice was to consider the latest version of CKEditor, but it didn't fit our needs as it wasn't easily extensible, external plug-ins would no longer be possible, and its large footprint would affect page speed scores and be painful to use with a mobile connection. After a long search, we settled on Tiptap as the base for our editor. Written in React, loaded in chunks when needed for optimal performance and with many APIs and extensibility options, it was the perfect fit. Aside from the technical improvements, the editor offers new tools and a great base for writing our own plugins. I'll walk you through the main features throughout this blog. If you want a more technical deep dive, then please see my development blog. The Toolbar The toolbar has been redesigned to put the most commonly used styles first, with the least used styles and functions into an ellipses menu. The new paragraph menu contains the header styles, as well as the code block. The plus menu adds lists, boxes and quotes. The benefit of this new compact menu is that it displays just the same on mobile. Currently, there are different editor styles for desktops, tablets and mobiles with some style buttons removed to save space. With Invision Community 5, this is no longer the case. Even the smallest display gets all the functionality. mobile-toolbar.mp4 Emojis & Icons Emojis have become a great way to embellish writing and express emotion. The new emoji picker has been modernized with larger emojis and tooltips to showcase the emoji shortcodes. The Icons tab, new for Invision Community 5, allows you to add Font Awesome Icons directly to your content. Lastly, both the emoji selector and the shortcode suggestion dropdown support arrow-key navigation, so you don't have to move your hands from the keyboard to the mouse. Content Boxes The feature I'm personally most excited about is boxes. The concept started as an abstraction of spoilers because sometimes you just want "a box" - a section that stands out from the rest of the content, something we do manually in our documentation and guides on this site. Each box has a tile and the following options: Expandable - You can mark a box as "expandable" which is functionally the same as a spoiler. One improvement is that expandable boxes use native HTML details and summary elements instead of plain Javascript animated divs. Colors - You can optionally keep it grey on grey like spoilers, but I think that's so boring! The colors automatically adjust to the theme colors, so it will look great in dark and light mode. Float (left/right/none) - You can make the box align to the left or right of other content just like you can for images Width - When the box is floated, you can set the width to big, medium or small. Boxes.mp4 Link Expansion Invision Community has long expanded some links, such as YouTube, offering more context or even a mini-player where appropriate. With Invision Community 5, we've added support for embedding dynamic link previews using site metadata. This is a preview of a topic on our forum. For those unaware, the Open Graph (OG) Protocol is essentially a way webpages can specify a title, image, and description to be dynamically embedded on another platform. This is the underlying technology when you see the link preview in Meta, X, Slack, or iMessage. Code Blocks and Inline Code The new editor adds inline, syntax-highlighted code blocks and inline code. Both formats can be applied via the toolbar, or optionally, you can wrap text in a single backtick (`) to convert it to an inline code block or triple backticks (```) to convert it to a code block. The code blocks also support numerous languages for syntax highlighting, including a new custom highlighter for the Invision HTML Template Syntax (Invision Community theme creators and application developers, you're welcome!) Semantic Headings and Relative Sizes Invision Community 5 adds a block selector with headings 1 through 6 in the new editor. It's possibly the most common request I hear so that people can use consistent styling rather than just big bold text in a paragraph tag. Semantic headings are also ideal for SEO and accessibility. In addition to the block selector, you can create headings with the corresponding markdown shortcut. Consecutive pound signs (#) at the start of a line followed by a space (the number of pounds corresponds to the "level" of the heading). For example ### creates a Heading 3 (<h3/>) creates the heading for you. Using clear header tags means screen readers and search engines can better understand your content as using absolute font sizes, such as 16px, can make it unclear what type of element is actually being used. Is it a heading or just a paragraph with large bold text? Furthermore, you may want different sizes depending on the content and device type. Mobile devices may benefit from a large base font size. So we added percent-based font sizes which change the font size based on whatever the default would be for that block. text-menus.mp4 Further UX Improvements The new editor in Invision Community 5 has several tangible improvements, including a mobile-first design. In the current editor, some functionality was hidden behind modals and double clicks, which are either not obvious on mobile devices or not possible at all. The new editor no longer relies on modals and instead uses buttons and dropdown menus that work perfectly with mobile and other touch-based devices. New Line Arrows For block content, such as boxes, images and quotes, we've added the ability to create a new line before or after the block with the click of a button. This was an issue of frustration for mobile and touch devices where it was not always clear where the cursor was and a finger is a much less accurate aiming device! Sticky Toolbar Anyone who has authored a long piece of content knows the pain of scrolling up and down to get the toolbar in view. To make writing longer content less stressful, we've made the toolbar sticky so that it will always be fixed at the top of the editor after scrolling down. sticky-toolbar.mp4 Markdown Style Shortcuts One common request is to support markdown in the editor. While we opted not to include full markdown support, the new editor recognizes many markdown-style formatting shortcuts. markdown.mp4 Colors A common challenge with rich text editors on sites with multiple themes is colors often need to consistently look right across all themes. This is even more important with Invision Community 5, as it has a native dark mode feature. For this reason, we opted to offer a reduced set of color options that all adapt dynamically to the theme. I mentioned this about box colors above, but this is also true of the font color. The difference in shade is slight, but it's very noticeable without it. Toggling between light and dark mode will never produce unreadable text. colors.mp4 We can't wait for you to try the new editor; it has already been very popular with our small testing group. Which feature are you most looking forward to trying? View full blog entry
-
Invision Community 5 has a brand new editing experience powered by a lightweight, fast React text editor built for mobile and modern browsers. The venerable CKEditor v4 at the core of our current editor is starting to show its age, so we wanted a clean slate with Invision Community v5 with an editor that was optimized for mobile use, easily extensible and had a feature set that would take us into the next era of Invision Community and beyond. The obvious choice was to consider the latest version of CKEditor, but it didn't fit our needs as it wasn't easily extensible, external plug-ins would no longer be possible, and its large footprint would affect page speed scores and be painful to use with a mobile connection. After a long search, we settled on Tiptap as the base for our editor. Written in React, loaded in chunks when needed for optimal performance and with many APIs and extensibility options, it was the perfect fit. Aside from the technical improvements, the editor offers new tools and a great base for writing our own plugins. I'll walk you through the main features throughout this blog. If you want a more technical deep dive, then please see my development blog. The Toolbar The toolbar has been redesigned to put the most commonly used styles first, with the least used styles and functions into an ellipses menu. The new paragraph menu contains the header styles, as well as the code block. The plus menu adds lists, boxes and quotes. The benefit of this new compact menu is that it displays just the same on mobile. Currently, there are different editor styles for desktops, tablets and mobiles with some style buttons removed to save space. With Invision Community 5, this is no longer the case. Even the smallest display gets all the functionality. mobile-toolbar.mp4 Emojis & Icons Emojis have become a great way to embellish writing and express emotion. The new emoji picker has been modernized with larger emojis and tooltips to showcase the emoji shortcodes. The Icons tab, new for Invision Community 5, allows you to add Font Awesome Icons directly to your content. Lastly, both the emoji selector and the shortcode suggestion dropdown support arrow-key navigation, so you don't have to move your hands from the keyboard to the mouse. Content Boxes The feature I'm personally most excited about is boxes. The concept started as an abstraction of spoilers because sometimes you just want "a box" - a section that stands out from the rest of the content, something we do manually in our documentation and guides on this site. Each box has a tile and the following options: Expandable - You can mark a box as "expandable" which is functionally the same as a spoiler. One improvement is that expandable boxes use native HTML details and summary elements instead of plain Javascript animated divs. Colors - You can optionally keep it grey on grey like spoilers, but I think that's so boring! The colors automatically adjust to the theme colors, so it will look great in dark and light mode. Float (left/right/none) - You can make the box align to the left or right of other content just like you can for images Width - When the box is floated, you can set the width to big, medium or small. Boxes.mp4Link Expansion Invision Community has long expanded some links, such as YouTube, offering more context or even a mini-player where appropriate. With Invision Community 5, we've added support for embedding dynamic link previews using site metadata. This is a preview of a topic on our forum. For those unaware, the Open Graph (OG) Protocol is essentially a way webpages can specify a title, image, and description to be dynamically embedded on another platform. This is the underlying technology when you see the link preview in Meta, X, Slack, or iMessage. Code Blocks and Inline Code The new editor adds inline, syntax-highlighted code blocks and inline code. Both formats can be applied via the toolbar, or optionally, you can wrap text in a single backtick (`) to convert it to an inline code block or triple backticks (```) to convert it to a code block. The code blocks also support numerous languages for syntax highlighting, including a new custom highlighter for the Invision HTML Template Syntax (Invision Community theme creators and application developers, you're welcome!) Semantic Headings and Relative Sizes Invision Community 5 adds a block selector with headings 1 through 6 in the new editor. It's possibly the most common request I hear so that people can use consistent styling rather than just big bold text in a paragraph tag. Semantic headings are also ideal for SEO and accessibility. In addition to the block selector, you can create headings with the corresponding markdown shortcut. Consecutive pound signs (#) at the start of a line followed by a space (the number of pounds corresponds to the "level" of the heading). For example ### creates a Heading 3 (<h3/>) creates the heading for you. Using clear header tags means screen readers and search engines can better understand your content as using absolute font sizes, such as 16px, can make it unclear what type of element is actually being used. Is it a heading or just a paragraph with large bold text? Furthermore, you may want different sizes depending on the content and device type. Mobile devices may benefit from a large base font size. So we added percent-based font sizes which change the font size based on whatever the default would be for that block. text-menus.mp4Further UX Improvements The new editor in Invision Community 5 has several tangible improvements, including a mobile-first design. In the current editor, some functionality was hidden behind modals and double clicks, which are either not obvious on mobile devices or not possible at all. The new editor no longer relies on modals and instead uses buttons and dropdown menus that work perfectly with mobile and other touch-based devices. New Line Arrows For block content, such as boxes, images and quotes, we've added the ability to create a new line before or after the block with the click of a button. This was an issue of frustration for mobile and touch devices where it was not always clear where the cursor was and a finger is a much less accurate aiming device! Sticky Toolbar Anyone who has authored a long piece of content knows the pain of scrolling up and down to get the toolbar in view. To make writing longer content less stressful, we've made the toolbar sticky so that it will always be fixed at the top of the editor after scrolling down. sticky-toolbar.mp4Markdown Style Shortcuts One common request is to support markdown in the editor. While we opted not to include full markdown support, the new editor recognizes many markdown-style formatting shortcuts. markdown.mp4Colors A common challenge with rich text editors on sites with multiple themes is colors often need to consistently look right across all themes. This is even more important with Invision Community 5, as it has a native dark mode feature. For this reason, we opted to offer a reduced set of color options that all adapt dynamically to the theme. I mentioned this about box colors above, but this is also true of the font color. The difference in shade is slight, but it's very noticeable without it. Toggling between light and dark mode will never produce unreadable text. colors.mp4We can't wait for you to try the new editor; it has already been very popular with our small testing group. Which feature are you most looking forward to trying? -
My oh my, how exciting
-
If you are referring to the classic and custom emojis, yes they are still supported in the editor We didn't include them in the Icon Creator however as those images can get quite large and it can make the SVG too large after embedding them.
-
No plans for a size option because the generated icons are in fact dimensionless SVGs, meaning they are rendered at whatever size is specified in your community theme's CSS.
-
Thanks for reporting this issue, we believe it should be resolved now, let us know if you are still having issues.
-
So a few notes That appears to be the Google Analytics Console, but to setup custom events this would be handled via Tag Manager. Google has some pretty good support articles on the topic; These 2 may be helpful https://support.google.com/analytics/answer/12229021 https://support.google.com/analytics/answer/10075209. You actually don't even need to create the event it's implicit in the GA4 tag. Those are all properties, not events. The properties should be available on many different events, so you probably don't want to track them individually. Hope this helps! We don't want to take an authoritative "right or wrong" stance as the Data Layer integration is designed to be as flexible as possible.
-
Happy to help, and well said! These metrics are for understanding user behavior not a good/bad indicator; like you said this one property can mean many things. While few of the provided properties are actionable on their own, looking at them together should give you a sense of the bigger picture.
-
Yes, page_view is every page while content_view only triggers when viewing a specific content item (e.g. topics, blog entries, etc). The listings and your landing page, however, do not count. Just due to the nature of site navigation, clicking around several times before finding a piece of content is quite common, so the page_view is usually quite a bit larger than content_view. Comparing the two can actually be a good metric to observe (especially if you can get the trend over time). It tells you, of your total traffic, who's browsing and who's just reading content.
-
Our May update brings Email Bounce Management to our Invision Community cloud platform. In this blog entry, I'll go over what it is, why it's important, and how you can use it when needed. What is it? For those who may not know, an email bounce occurs when an email message is sent and the recipient either doesn't exist (hard bounce) or they have blocked the sender (you!) in a spam complaint (soft bounce). When an email message bounces we block that address at the cloud level so it cannot receive new messages from any community. This is considered good practice for email service providers, and ensures that we maintain a low bounce rate when sending emails on behalf of all the communities on our platform. Please note this pertains to the Invision Community Cloud platform email service. If you use SMTP or SendGrid, email bounces are managed externally and may enforce different policies. What Bounce Management Tools are we providing? We're giving you the ability to see which members have blocked email addresses, and to unblock emails known to be safe. Seeing which emails are blocked In the AdminCP Members table (AdminCP > Members > Members), on cloud you will see a new filter: "Email Undeliverable". These are any member accounts that have emails blocked due to soft or hard bounces. Additionally, on the front end, if a Member's email is blocked, they will see a warning indicator in the Nav/User Bar prompting them to change their email in their account settings. Lifting Email Blocks As stated earlier, when an email is blocked, it is blocked on the cloud platform level. If the block is not locked (which can happen if it's unblocked too many times), you will see a warning the Member's AdminCP Profile page. Clicking into it you will see an option to unblock. One final note on the Email Block Policy If a situation occurs when an email is unblocked and gets blocked again a certain number of times, the block becomes permanent. In these cases, you will be able to see that the email is blocked but there won't be an option to unblock, and the member will have to change their email to resume receiving your Community's messages through us. This ensures that the Invision Community cloud platform retains a good email sending reputation. Thanks for reading and as always stay tuned to for the latest and greatest upcoming features and insights! The features discussed in this announcement are not available for Invision Community Classic. Click here to learn more about switching to our platform to get this and other benefits. -
Our May update brings Email Bounce Management to our Invision Community cloud platform. In this blog entry, I'll go over what it is, why it's important, and how you can use it when needed. What is it? For those who may not know, an email bounce occurs when an email message is sent and the recipient either doesn't exist (hard bounce) or they have blocked the sender (you!) in a spam complaint (soft bounce). When an email message bounces we block that address at the cloud level so it cannot receive new messages from any community. This is considered good practice for email service providers, and ensures that we maintain a low bounce rate when sending emails on behalf of all the communities on our platform. Please note this pertains to the Invision Community Cloud platform email service. If you use SMTP or SendGrid, email bounces are managed externally and may enforce different policies. What Bounce Management Tools are we providing? We're giving you the ability to see which members have blocked email addresses, and to unblock emails known to be safe. Seeing which emails are blocked In the AdminCP Members table (AdminCP > Members > Members), on cloud you will see a new filter: "Email Undeliverable". These are any member accounts that have emails blocked due to soft or hard bounces. Additionally, on the front end, if a Member's email is blocked, they will see a warning indicator in the Nav/User Bar prompting them to change their email in their account settings. Lifting Email Blocks As stated earlier, when an email is blocked, it is blocked on the cloud platform level. If the block is not locked (which can happen if it's unblocked too many times), you will see a warning the Member's AdminCP Profile page. Clicking into it you will see an option to unblock. One final note on the Email Block Policy If a situation occurs when an email is unblocked and gets blocked again a certain number of times, the block becomes permanent. In these cases, you will be able to see that the email is blocked but there won't be an option to unblock, and the member will have to change their email to resume receiving your Community's messages through us. This ensures that the Invision Community cloud platform retains a good email sending reputation. Thanks for reading and as always stay tuned to for the latest and greatest upcoming features and insights! The features discussed in this announcement are not available for Invision Community Classic. Click here to learn more about switching to our platform to get this and other benefits. View full blog entry
-
Same. I actually read notifications now instead of pretend I didn't see emails
-
Yes, that is correct for now. We're planning support for more streaming platforms (including Vimeo Live) coming up soon.
-
@Randy Calvert In this first go, the non-admin UI is minimal. It's just the nag Charles showed above, and yeah behind the scenes it will catch any email from being sent to them. The Admins will be able to filter via the ACP to view all members with blocked emails Additionally, these block records are saved so no one can use that email in the future (new accounts or existing) while it's blocked.
-
Wow, shout out to Randy for being such an expert enthusiast before we even release! I've said this before but this was lots of work over the past months and I am so excited for everyone to use it and provide valuable feedback to prioritize next features.
-
I am excited to officially announce the first release of Live Topics coming in our April release of Invision Community for selected cloud plans! Live Topics is a hosted live chat and question-and-answer event that is converted into a forum topic upon completion. It combines the fun and togetherness of a live event with the permanence of a forum topic allowing you to continue the conversation long after the event has ended. Recap: The first look at Live Topics including a video showing the main features. I know many of you on our community have already had sneak peeks and have been patiently waiting, so without further ado, let's get into it. Who is Live Topics for? Live Topics is a great way to bring people together for a live chat event. We have been using Live Topics for our monthly release chat webinars. In the past we have used Zoom to host the live stream and take some questions. This approach is fine, however once the Zoom finishes, the chat history isn't available on our community. We upload a video for those who missed the event, but it doesn't feel interactive. Live Topics automatically converts the questions and answers to a regular forum topic which allows the discussion to continue. Furthermore, the questions are separated from the general chat during the event making it easier for hosts to find and answer questions raised during the event. Live Topics is perfect for anything from product release events to monthly bookclub discussions and everything in between. How does it work? Live Topics are live virtual events within a community. The process to creating a live topic is simple: Schedule your Live Topic from the ModeratorCP. When it's time to start, a host starts the live session. This is the bread and butter of the system; attendees can answer your questions and post chat messages all in realtime. All done? End the topic. It will be converted to a regular forum topic for further discussion and reference. Scheduling and Managing Live Topics Live topics are managed from the ModeratorCP. When scheduling a live topic, you can configure the following options: Duration - This is the scheduled duration that attendees will see before the event. This sets expectations of time for your community. Add To Events - This option creates a new Calendar Event in your Community. This allows the live topic to be searched, viewed, and promoted like other event within your community. Live Video URL - This is the url of a YouTube embed. You can also add this after starting the live session. (Support for platforms other than YouTube coming soon 🙂). We stream Zoom straight to a live Youtube video currently. Attendees - This option specifies who can attend the live topic. Leaving as "Recommended" allows any registered member to join. Staff - The staff are responsible for moderating user generated content as it comes in. The default setting will add all groups that are allowed to moderate live topics. You can adjust this default in the AdminCP. Additional Hosts - The hosts have the highest level of permission in the live topic. They create questions, update the video url, and guide the discussion. By scheduling the Live Topic, you are automatically a host but you can add more hands to help. All hosts get a reminder notification close to when the event is due to start. Require Approval for question replies/chat messages - During the live session, you will likely want to control the rate of incoming content (especially questions). Chat Message creation can be locked during the live session. Hosting the Live Topic To start a live topic, you need to click into it from the ModeratorCP. Alternatively, if it was added to an Event you can click into it from there. Then just click start, it's as simple as that. Your attendees will see a waiting page with a count down. It is worth mentioning that the live topic cannot Run without any hosts in attendance. When hosts abandon a live session, it will automatically end within a few minutes Run longer than 6 hours. The aim of Live Topics is to accompany a live event and to be short term compared to regular forum topics. The live session will also end automatically in this case Once it's started, the UI is divided into have 2 main areas: One for Main Questions and another for Chat. Any video streams you embed are show in the top right and automatically started. Main Questions (and Replies) Main Questions and their replies are what will be preserved when the topic is converted into a forum topic. Only staff can create main questions in order to ensure smooth topic flow. For each question, you can also configure if the replies are "locked". A main question can be unlocked, locked to all members, or locked to non-staff. When a question is locked, new replies cannot be created. Chat Channels For each Live Topic, there is a General Chat and a Staff Chat Channel. If a member is non-staff, instead of the Channel selector tabs, they will see only "Chat". When a non-staff attendee creates a chat message, it can be marked as a "question". This lets the host know that the question was intended for others to respond to. Optionally, the host can even convert the message into a question so it's integrated into the standard topic post-conversion Live Stream Tools Hosts can select a time in the live feed a main question was answered. The video embed can also optionally be changed mid session. This is useful if you don't know the live stream URL before hand. Moderation Tools Staff can hide or delete questions, chat messages and replies. The reply and chat feeds can also be set to automatically hide new items on creation. Non-staff attendees can report content. Reports show in the staff chat channel. Last but not least, staff members can silence attendees. This takes away their privileges to reply and create chat messages. The Converted Topic When the live session completes, our Cloud platform gets to work converting all that data into a regular forum topic. Converted Live Topics feature a questions box which allows you to drill down to specific questions within the topic. The questions can be browsed individually, or even split into separate topics! Lastly, new replies come with the option to select an originating question. That's a wrap (for now) We look forward to seeing all of you use live topics on your communities. As we've hinted elsewhere there are many more features coming soon, so keep your eyes peeled! The features discussed in this announcement are not available for Invision Community Classic. Click here to learn more about switching to our platform to get this and other benefits. -
I am excited to officially announce the first release of Live Topics coming in our April release of Invision Community for selected cloud plans! Live Topics is a hosted live chat and question-and-answer event that is converted into a forum topic upon completion. It combines the fun and togetherness of a live event with the permanence of a forum topic allowing you to continue the conversation long after the event has ended. Recap: The first look at Live Topics including a video showing the main features. I know many of you on our community have already had sneak peeks and have been patiently waiting, so without further ado, let's get into it. Who is Live Topics for? Live Topics is a great way to bring people together for a live chat event. We have been using Live Topics for our monthly release chat webinars. In the past we have used Zoom to host the live stream and take some questions. This approach is fine, however once the Zoom finishes, the chat history isn't available on our community. We upload a video for those who missed the event, but it doesn't feel interactive. Live Topics automatically converts the questions and answers to a regular forum topic which allows the discussion to continue. Furthermore, the questions are separated from the general chat during the event making it easier for hosts to find and answer questions raised during the event. Live Topics is perfect for anything from product release events to monthly bookclub discussions and everything in between. How does it work? Live Topics are live virtual events within a community. The process to creating a live topic is simple: Schedule your Live Topic from the ModeratorCP. When it's time to start, a host starts the live session. This is the bread and butter of the system; attendees can answer your questions and post chat messages all in realtime. All done? End the topic. It will be converted to a regular forum topic for further discussion and reference. Scheduling and Managing Live Topics Live topics are managed from the ModeratorCP. When scheduling a live topic, you can configure the following options: Duration - This is the scheduled duration that attendees will see before the event. This sets expectations of time for your community. Add To Events - This option creates a new Calendar Event in your Community. This allows the live topic to be searched, viewed, and promoted like other event within your community. Live Video URL - This is the url of a YouTube embed. You can also add this after starting the live session. (Support for platforms other than YouTube coming soon 🙂). We stream Zoom straight to a live Youtube video currently. Attendees - This option specifies who can attend the live topic. Leaving as "Recommended" allows any registered member to join. Staff - The staff are responsible for moderating user generated content as it comes in. The default setting will add all groups that are allowed to moderate live topics. You can adjust this default in the AdminCP. Additional Hosts - The hosts have the highest level of permission in the live topic. They create questions, update the video url, and guide the discussion. By scheduling the Live Topic, you are automatically a host but you can add more hands to help. All hosts get a reminder notification close to when the event is due to start. Require Approval for question replies/chat messages - During the live session, you will likely want to control the rate of incoming content (especially questions). Chat Message creation can be locked during the live session. Hosting the Live Topic To start a live topic, you need to click into it from the ModeratorCP. Alternatively, if it was added to an Event you can click into it from there. Then just click start, it's as simple as that. Your attendees will see a waiting page with a count down. It is worth mentioning that the live topic cannot Run without any hosts in attendance. When hosts abandon a live session, it will automatically end within a few minutes Run longer than 6 hours. The aim of Live Topics is to accompany a live event and to be short term compared to regular forum topics. The live session will also end automatically in this case Once it's started, the UI is divided into have 2 main areas: One for Main Questions and another for Chat. Any video streams you embed are show in the top right and automatically started. Main Questions (and Replies) Main Questions and their replies are what will be preserved when the topic is converted into a forum topic. Only staff can create main questions in order to ensure smooth topic flow. For each question, you can also configure if the replies are "locked". A main question can be unlocked, locked to all members, or locked to non-staff. When a question is locked, new replies cannot be created. Chat Channels For each Live Topic, there is a General Chat and a Staff Chat Channel. If a member is non-staff, instead of the Channel selector tabs, they will see only "Chat". When a non-staff attendee creates a chat message, it can be marked as a "question". This lets the host know that the question was intended for others to respond to. Optionally, the host can even convert the message into a question so it's integrated into the standard topic post-conversion Live Stream Tools Hosts can select a time in the live feed a main question was answered. The video embed can also optionally be changed mid session. This is useful if you don't know the live stream URL before hand. Moderation Tools Staff can hide or delete questions, chat messages and replies. The reply and chat feeds can also be set to automatically hide new items on creation. Non-staff attendees can report content. Reports show in the staff chat channel. Last but not least, staff members can silence attendees. This takes away their privileges to reply and create chat messages. The Converted Topic When the live session completes, our Cloud platform gets to work converting all that data into a regular forum topic. Converted Live Topics feature a questions box which allows you to drill down to specific questions within the topic. The questions can be browsed individually, or even split into separate topics! Lastly, new replies come with the option to select an originating question. That's a wrap (for now) We look forward to seeing all of you use live topics on your communities. As we've hinted elsewhere there are many more features coming soon, so keep your eyes peeled! The features discussed in this announcement are not available for Invision Community Classic. Click here to learn more about switching to our platform to get this and other benefits. View full blog entry
-
Almost instant
-
ChatGPT wrote half the code before we fixed it
-
Currently chat is not converted into posts or anything, but the data is preserved in the database so you can expect a transcript in a very early update. Hope that answers your question 🙂
-
After it's over, all the questions and replies get converted into a permanent topic.
-
Real easy to expand there
