How to Enable HTML tags in Backend Attributes in Magento 2

Considering the available CMS’s for eCommerce, Magento has still remained as the first pick for store owner whether it is small or large scale. Due to its flexible architecture, it allows us to customize the Magento according to our Business needs by extending the Native code. Magento backend is one of the fully powerful dashboards that enables store owner to manage everything without having knowledge of code. This Backend is made up of various configuration & attributes that determine how an attribute can be used in the frontend, it may be appearance, behavior or any operation. Even some of the backend attributes help store owner setting up customer convenience or guide them by placing notes in frontend.
Several times, it happens that having multiple payment or shipping method may confuse your customer at that time placing useful instructions using backend configuration helps a lot but you can only place textual instruction that means you cannot style text or place link. So at that time, you required to place HTML tags to add a link in the description.
So here is the small piece of code using which you can add HTML tags in backend attributes.
By default, Magento escapeHtml that renders the instructions for the payment methods. For that, we need to create a small extension that will override the getInstructions function.
Firstly, create “registration.php” file inside your extension folder using below code.

App\code\Vendor\Extension\registration.php

<pre class="lang:default decode:true">
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
‘VENDOR_EXTENSION',
__DIR__
);
</pre>

After that we need to create one more “Module.xml” file at this path.
App\code\Vendor\Extension\etc\module.xml

<pre class="lang:default decode:true">
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
	<module name="VENDOR_EXTENSION" setup_version="1.0.0">
   </module>
</config>
</pre>

Now, we need to create “di.xml” file inside our extension frontend folder.
App\code\Vendor\Extension\etc\frontend\di.xml

<pre class="lang:default decode:true">
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="VENDOR\EXTENSION\Model\InstructionsConfigProvider" type="VENDOR\EXTENSION\Model\Rewrite\InstructionsConfigProvider" />
</config>
</pre>

In this final step, we need to create “InstructionsConfigProvider.php” at this path.
App\code\Vendor\Extension\Model\Rewrite\InstructionsConfigProvider.php

<pre class="lang:default decode:true">
<?php
namespace VENDOR\EXTENSION\Model\Rewrite;
class InstructionsConfigProvider extends \VENDOR\EXTENSION\Model\InstructionsConfigProvider
{
	public function getInstructions($code)
	{
    	return nl2br($this->methods[$code]->getInstructions());// removed escapeHtml function!
	}
}
</pre>

That’s it you are done! You have successfully enable html tags in backend attributes. So, whenever you add any html tags it will automatically converted to hyperlink or respective format.

Let us know if you are facing an issue while implementing using this code by commenting below.

Happy Coding!