S&box Wiki

Revision Difference

embedding-websites#561144

<cat>UI.Intro</cat> <title>Embedding Websites</title> You can embed websites within your game - the easiest way to do this is through `WebPanel`s to embed websites in your game. These allow you to display websites, play YouTube videos, music, etc. inside your game's UI. ## Setup WebPanels are really easy to use. Create a `WebPanel` element, and then set the `Surface.Url` property to navigate to a page. You can use `AcceptsFocus` (defaults to true) to determine whether the panel receives keyboard input. ## Example Using these is relatively straightforward - here's what one looks like in razor: ``` @using Sandbox.UI⤶ @inherits RootPanel⤶ @using Sandbox.UI;⤶ @inherits PanelComponent⤶ <root> <WebPanel @ref="MyWebPanel"></WebPanel>⤶ </root>⤶ ⤶ <style>⤶ WebPanel { position: absolute; top: 50px; left: 50px; width: 1280px; height: 720px; pointer-events: all; } </style> ⤶ @code {⤶ private WebPanel MyWebPanel { get; set; }⤶ ⤶ protected override void OnAfterTreeRender(bool firstTime)⤶ {⤶ base.OnAfterTreeRender(firstTime);⤶ ⤶ if (firstTime)⤶ {⤶ MyWebPanel.Surface.Url = "https://sbox.facepunch.com/";⤶ }⤶ }⤶ }⤶ <WebPanel Url="https://asset.party/"></WebPanel> ⤶ <style>⤶ WebPanel{ position: absolute; top: 50px; left: 50px; width: 1280px; height: 720px; pointer-events: all; } </style> ⤶ </root>⤶ ``` <upload src="aa125/8db39e11929f368.png" size="1734700" name="image.png" />⤶ <upload src="b4aa4/8dc3b0c1974fa6a.png" size="132653" name="sbox-dev_qHLubhits0.png" />