How to put an image on a button?

Owned by Bharathi Manohar (Deactivated)
Last updated: Jul 11, 2022
2 min read

By providing the image URL inside HTML Image tags, we may add images to Buttons. Using the various controls accessible in the Flow Studio and Experience Designer, we can add buttons. The HTML markup should be entered in the Buttons' Text areas.

We can also make the button show Stars, Emoticons, and other images to show a pictorial Rating scale too. Example of an image HTML tag, <img src="https://exmaple.com/dynamic/images/rain-icon.png"/>


Example with Single Input control

We can follow the same steps to add image to the Buttons of Rating Control of the Flow Studio.

  • Go to Create> Agents> Flow Studio> Flow Studio canvas.

  • Drag and drop a Single Input control.

  • Go to the General Tab> Button

  • Add the Value for the buttons.

  • On the Text field, add the image URL with an HTML tag.

  • Save and launch the Bot or the Flow Studio Preview Bot

Single Input control with Image buttons

  • The Buttons will now have the images on the Buttons.