> For the complete documentation index, see [llms.txt](https://wiki.redmodding.org/scripting-cyberpunk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.redmodding.org/scripting-cyberpunk/scripting/snippets-and-examples/user-interface/custom-popups.md).

# Custom Popups

How to make custom and in-depth popups with Codeware

[Codeware](/scripting-cyberpunk/introduction/tools-and-frameworks/codeware.md) provides primitives for a lot of common UI components including pop ups. Here's a simple pop up implemented using Codeware's `InGamePopup` with custom text.

{% hint style="info" %}
You'll need to define this class in Redscript, but you're able to open the popup from either Redscript or CET.
{% endhint %}

```swift
import Codeware.UI.*

public class MinimalPopup extends InGamePopup {
  protected let m_header: ref<InGamePopupHeader>;
  protected let m_footer: ref<InGamePopupFooter>;
  protected let m_content: ref<InGamePopupContent>;
  protected let m_text: wref<inkText>;
  
  public static func Create() -> ref<MinimalPopup> {
    let self: ref<MinimalPopup> = new MinimalPopup();
    self.CreateInstance();
    return self;
  }
 
  protected cb func OnCreate() {
    super.OnCreate();
    this.m_container.SetSize(Vector2(800.0, 600.0));
    this.m_header = InGamePopupHeader.Create();
    this.m_header.SetTitle("Minimal Popup");
    this.m_header.SetFluffRight("Text Example");
    this.m_header.Reparent(this);
    this.m_footer = InGamePopupFooter.Create();
    this.m_footer.SetFluffIcon(n"fluff_triangle2");
    this.m_footer.SetFluffText("Simple popup with updatable text");
    this.m_footer.Reparent(this);
    this.m_content = InGamePopupContent.Create();
    this.m_content.Reparent(this);

    let canvas = new inkCanvas();
    canvas.SetName(n"canvas");
    canvas.SetAnchor(inkEAnchor.Fill);
    canvas.Reparent(this.m_content.GetRootCompoundWidget());

    let text = new inkText();
    text.SetName(n"updatableText");
    text.SetFontFamily("base\\gameplay\\gui\\fonts\\raj\\raj.inkfontfamily");
    text.SetFontStyle(n"Medium");
    text.SetFontSize(30);
    text.SetHorizontalAlignment(textHorizontalAlignment.Center);
    text.SetVerticalAlignment(textVerticalAlignment.Center);
    text.SetAnchor(inkEAnchor.Centered);
    text.SetAnchorPoint(Vector2(0.5, 0.5));
    text.SetMargin(inkMargin(0.0, 0.0, 0.0, 0.0));
    text.SetWrapping(true, 700.0);
    text.SetFitToContent(true);
    text.SetStyle(r"base\\gameplay\\gui\\common\\main_colors.inkstyle");
    text.BindProperty(n"tintColor", n"MainColors.Blue");
    text.SetText("Default text");
    text.Reparent(canvas);
    this.m_text = text;
  }

  public func SetCustomText(text: String) -> Void {
    this.m_text.SetText(text);
  }
} 
```

Which can then be used like this:

{% tabs %}
{% tab title="Redscript" %}

```swift
let controller = GameInstance.GetInkSystem().GetLayer(n"inkHUDLayer").GetGameController() as inkGameController;
let text = "Hello world";
let popup = MinimalPopup.Create();

popup.SetCustomText(text);
popup.Open(controller);
```

{% endtab %}

{% tab title="Lua" %}
{% hint style="info" %}
When accessing things defined in Redscript, don't forget to include modules with the correct format. For example, if your popup is defined as `MyCoolPopup` in the module `MyMod.Core`, you must instead reference the popup as `MyMod_Core_MyCoolPopup.Create()` on line 3.

Look here for more information: [REDScript To CET](/scripting-cyberpunk/scripting/redscript-to-cet.md)
{% endhint %}

```lua
local controller = Game.GetInkSystem():GetLayer("inkHUDLayer"):GetGameController()
local text = "Hello World"
local popup = MinimalPopup.Create()

popup:SetCustomText("Hello World")
popup:Open(controller)
```

{% endtab %}
{% endtabs %}

### Preview

<figure><img src="https://1927068511-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ffwsaoju1TBAUvMpI6NIw%2Fuploads%2FUWLQkMluR7BIL28WJt3C%2Fimage.png?alt=media&amp;token=ae059f44-32b8-415b-aed0-bd60ee95f33e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
See the [documentation for Codeware](https://github.com/psiberx/cp2077-codeware/wiki#ui-framework) for more examples or look at [InkPlayground](https://github.com/psiberx/cp2077-playground) for a good starting template for in-game popups.
{% endhint %}