{"id":16984,"date":"2023-12-14T14:07:04","date_gmt":"2023-12-14T22:07:04","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=16984"},"modified":"2024-01-22T11:05:04","modified_gmt":"2024-01-22T19:05:04","slug":"web-content-in-microsoft-mesh-powered-by-webview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/web-content-in-microsoft-mesh-powered-by-webview\/","title":{"rendered":"Web content in Microsoft Mesh, powered by WebView"},"content":{"rendered":"<p>Microsoft Mesh, <a href=\"https:\/\/www.microsoft.com\/en-us\/microsoft-365\/blog\/2023\/09\/26\/microsoft-mesh-enters-preview-in-october-including-a-new-teams-experience\/\">generally available in January<\/a>, provides\u00a0a\u00a0built-for-business toolkit\u00a0that accelerates\u00a0the creation of\u00a03D\u00a0multi-user experiences for PC and VR.\u00a0These\u00a0experiences can\u00a0be\u00a0even better when you bring everyday apps and information from the web into\u00a0your\u00a03D worlds.\u00a0Imagine bringing your distributed workforce together in an immersive space to review dashboards, discuss presentation slides, decorate spaces with brand images, play online games, or walk through interactive exhibits \u2013 all by using content used on the web, daily.<\/p>\n<p>The WebSlate component of the Mesh toolkit provides a secure, streamlined way to add and interact with web content by bringing the power of WebView2 technology to environment creators. With WebSlate, you can add a URL to a screen placed anywhere in a virtual Mesh environment and experience it across multiple users during an event. As an avatar in an immersive space, you can view, click, and discuss web content just as you would in a traditional web browser but with co-presence\u2014right on your PC or in your Meta Quest headset.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-16985 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-video-game-screen-shot-of-people-sitting-on-a-st.jpeg\" alt=\"Screenshot of internal Mesh environment of virtual avatars having a watch party\" width=\"1429\" height=\"782\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-video-game-screen-shot-of-people-sitting-on-a-st.jpeg 1429w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-video-game-screen-shot-of-people-sitting-on-a-st-300x164.jpeg 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-video-game-screen-shot-of-people-sitting-on-a-st-1024x560.jpeg 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-video-game-screen-shot-of-people-sitting-on-a-st-768x420.jpeg 768w\" sizes=\"(max-width: 1429px) 100vw, 1429px\" \/><\/p>\n<h2>Imagine using WebSlate in Mesh events for&#8230;<\/h2>\n<ul>\n<li>Livestream watch parties with your team<\/li>\n<li>Displaying social media feeds and leaderboards that excite and engage your audience<\/li>\n<li>Creating interactive exhibits out of existing web apps<\/li>\n<li>Drawing and ideating on a virtual whiteboard<\/li>\n<li>Personalizing a Mesh environment with your brand design assets and content<\/li>\n<li>Competing in online games<\/li>\n<\/ul>\n<h2>How does it work?<\/h2>\n<p>WebSlate leverages\u00a0<a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-edge\/webview2\/\">WebView2<\/a> to let users interact with apps at runtime. Windows WebView2 and Android WebView components help render content at runtime from URLs attached to the WebSlate prefab in the Mesh toolkit. The Mesh environment you create in Unity with the Mesh toolkit can then be experienced in the Mesh application with input, audio, and synchronization across multiple users if the web app allows it.<\/p>\n<p>For those seeking more robust web content experiences in Mesh outside of the base WebSlate prefab, other Mesh toolkit features like scripting can be used to configure triggers that show content when prompted by the user or to bring offline HTML content from local web apps into Mesh.<\/p>\n<p>With web content in Mesh, we\u2019re empowering developers to create web-powered UI&#8217;s and expose endpoints that communicate with Mesh through two-way messaging.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-16986\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-screenshot-of-a-computer-description-automatica.jpeg\" alt=\"Diagram showing how Mesh Toolkit and Webslate works with Android (Quest) WebView and Microsoft WebView2\" width=\"1297\" height=\"810\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-screenshot-of-a-computer-description-automatica.jpeg 1297w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-screenshot-of-a-computer-description-automatica-300x187.jpeg 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-screenshot-of-a-computer-description-automatica-1024x640.jpeg 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-screenshot-of-a-computer-description-automatica-768x480.jpeg 768w\" sizes=\"(max-width: 1297px) 100vw, 1297px\" \/><\/p>\n<p>To add web content to a Mesh environment, create a new Unity project or start with an existing one, then add the Mesh toolkit package. Once the toolkit has been added, drag and drop the WebSlate prefab into your scene and update the URL in Unity\u2019s Inspector panel to your desired webapp. Position the WebSlate in the scene where you wish, then preview the content using Mesh Emulation mode in Unity, enabling you to test interaction as end users will experience the web content in the Mesh app.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-16988\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-screenshot-of-a-computer-description-automatica.png\" alt=\"Screenshot of Mesh emulator\" width=\"1431\" height=\"711\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-screenshot-of-a-computer-description-automatica.png 1431w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-screenshot-of-a-computer-description-automatica-300x149.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-screenshot-of-a-computer-description-automatica-1024x509.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-screenshot-of-a-computer-description-automatica-768x382.png 768w\" sizes=\"(max-width: 1431px) 100vw, 1431px\" \/><\/p>\n<h2>What can WebSlate do?<\/h2>\n<ul>\n<li><strong>Secure content navigation<\/strong>: By default, WebSlate prevents unintended hyperlink navigations.<\/li>\n<li><strong>Multi-slate experience<\/strong>: Multiple WebSlates can be added to a Mesh environment<\/li>\n<li><strong>Multi-user visibility<\/strong>: Content can be seen by multiple users if the web app permits it<\/li>\n<li><strong>Scriptable<\/strong>: Scripts can be used to connect WebSlate to buttons that refresh content and toggle pages, or view local HTML files<\/li>\n<li><strong>Testable, measurable, and runtime performant<\/strong>: Works with the Mesh Emulator and Content Performance Analyzer in the Mesh toolkit and suspends\/resumes based on user visibility at runtime.<\/li>\n<li><strong>Visual customization<\/strong>: Image quality can be adjusted to suit viewing from various distances by using slates of different sizes.<\/li>\n<li><strong>Input &amp; audio built-in<\/strong>: End user web navigation and interaction with apps and videos &#8220;just work&#8221; in Mesh with no extra effort required.<\/li>\n<\/ul>\n<p>Introducing web content into immersive spaces in Mesh helps developers easily surface commonly used apps and websites into user experiences. WebSlate helps elevate engagement and boost connections by keeping people immersed in familiar content.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-16989\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-computer-screen-shot-of-a-room-description-auto.jpeg\" alt=\"Screenshot within Mesh environment of virtual avatars looking at a screen in a large room with an additional screen on a wall closer to the right of image\" width=\"1428\" height=\"782\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-computer-screen-shot-of-a-room-description-auto.jpeg 1428w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-computer-screen-shot-of-a-room-description-auto-300x164.jpeg 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-computer-screen-shot-of-a-room-description-auto-1024x561.jpeg 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/12\/a-computer-screen-shot-of-a-room-description-auto-768x421.jpeg 768w\" sizes=\"(max-width: 1428px) 100vw, 1428px\" \/><\/p>\n<p>Get started\u00a0<a href=\"https:\/\/learn.microsoft.com\/en-us\/mesh\/develop\/development-overview\">developing Mesh environments<\/a>\u00a0today, then <a href=\"https:\/\/learn.microsoft.com\/en-us\/mesh\/develop\/enhance-your-environment\/webcontent\">add web content<\/a> to experiences.<\/p>\n<p>For the latest news and announcements, follow <a href=\"http:\/\/www.microsoft.com\/microsoft365dev\">@Microsoft365Dev on X (Twitter).<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover how the WebSlate component of the Mesh toolkit provides a secure, streamlined way to add and interact with web content.<\/p>\n","protected":false},"author":139108,"featured_media":17020,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[266,293,292],"class_list":["post-16984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-365-developer","tag-microsoft-mesh","tag-webslate","tag-webview"],"acf":[],"blog_post_summary":"<p>Discover how the WebSlate component of the Mesh toolkit provides a secure, streamlined way to add and interact with web content.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/16984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/139108"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=16984"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/16984\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/17020"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=16984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=16984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=16984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}