Now that you have already created a dialog box that pops up when the player interacts with the NPC, you can easily add dialog for the player to see when they click on the Talk button. Simply duplicate the DialogBox Widget Blueprint that you made previously and place it in the NPC folder under Content Browser located in Content | Blueprints | UI. Rename the duplicated Widget Blueprint Shop_Talk.

We will now add some proper dialog to this menu by opening the Shop_Talk Widget Blueprint. Then, within the Designer viewport, select the Text Block that is already placed into your Canvas Panel.

Once selected, navigate to Details | Content and, within Text, select Bind | + Create Binding.

As always, this action will automatically bring you to the Graph Editor and set the Get Text function to return a null value from a Return node. The next steps are identical to the steps that you did when calling dialog from the NPCDialog variable in the previous sections. You must navigate to the My Blueprint tab and use the GET version of the NPCDialog variable.

Then, drag out the NPCDialog array pin and select the Get function under Utilities | Array. Lastly, have the GET function select the correct element of the NPCDialog array. In this case, we would keep element 0 selected since we set our dialog in element 0 earlier in this chapter. Once the proper dialog is chosen, link GET to Return Value of the ReturnNode. At this point, your Graph Editor should look like the following screenshot:

You are now finished with the Shop_Talk Widget Blueprint. You need to now bind it to the Talk button in the Shop_Welcome Widget Blueprint, so open the Designer view in Shop_Welcome and select the Talk button. In the Details panel, navigate to Events and press the + button next to OnClicked:

This should now create an OnClicked event bound to your Talk button and the Event Graph should now have automatically opened. From here, what we need to do is upon the button being clicked, we need to close the Shop_Welcome Widget Blueprint and open the Shop_Talk Widget Blueprint. These steps should be very similar to what you did many times previously when you opened and closed Widget Blueprints after button presses. Link the OnClicked event to Remove from Parent located under Widget, which will close your current Widget Blueprint. Then, link the Create Widget node to Remove from Parent, which is located under User Interface. Change the class of Create Widget to Shop_Talk so that your Shop_Talk Widget Blueprint is generated. From here, link Add to Viewport to Return Value of the Create Shop_Talk Widget node that is located under User Interface | Viewport. Also, be sure Add to Viewport is linked to the out pin of Create Shop_Talk Widget so that the Widget Blueprint is displayed in the player's view only after the Shop_Talk widget is created. When you are finished, your EventGraph for your Talk button should look like the following screenshot:

You may have noticed that the Talk button now works perfectly, but the text will get cut off:

This is because we are not wrapping the text. To wrap the text, go back into the Shop_Talk Widget Blueprint and, in the Designer view, select the Dialog Text Block. Then, in the Details panel, navigate to Appearance and check Auto Text Wrap. This will ensure that the text is always wrapped around the content, which in this case will move the text to a new line when it hits the border of the Text Block. If you test the Talk button, the words should now wrap like this:

At this point, you should have the interaction working perfectly between the player and the NPC with all buttons working properly, with the exception of the Shop button.