Add floating Chat Bot (Microsoft Virtual Agent) on Power Portal (PowerApps)

What is Issue?

Microsoft is providing the Virtual Agents(chat bots) to provide the customers better communication ability on many channels like websites, Skype, Teams. Microsoft is also introduced the Power Portals. But how to integrate this Virtual Agent(chat bot) with Power Portal?

The Reason-

Power Portal provides the way adding the extra code snippet in portals. But when we try to embed the Virtual Agents in Power Portal using this code snippet it shows the chatbot window at the bottom of the portal. Code provided by Microsoft Virtual Agent after publishing is just an IFrame. So user is not able to see floating chat bot.

Solution-

To make your Virtual agent float you need some customized embed code with some JavaScript and CSS.
1. Create a CSS Style-sheet File with below CSS-

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
.closePopUp{
display: block;
position: fixed;
bottom: 312px;
right: 50px;
border: 3px solid #f1f1f1;
z-index: 99;
width:30px;
height:30px;
background-color: transparent;
color:#f1f1f1;
}
/* The popup chat - hidden by default */
.chat-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
height:350px;
}

This CSS will help to float chat bot at bottom left corner.

2.Add the saved CSS file to power portal –
Navigate -> make.powerapps.com ->Apps -> Select Portal-> Click on Edit

VAPowerPortal1

3.When Editor Opens -> Click on Themes and upload the CSS
VAPowerPortal2

Save the Code Editor and close the Portal editor.

4. Open the Portal Management Model-Driven App
VAPowerPortal3

5. Navigate to Content Snippet under Content and search for “Chat Widget Code”-
VAPowerPortal4
If you want you can create other Content Snippet of HTML type and add it on “Home” Web Template.

6. Open the Content Snippet-Chat Widget Code or newly created content snippet by you-

VAPowerPortal5

7. Add the Below code in Value as HTML and save the content snippet-


<script>
  function openForm() {
    document.getElementById("myForm").style.display = "block";
  }
  function closeForm() {
    document.getElementById("myForm").style.display = "none";
  }
</script><button onclick="openForm()" class="open-button">Chat</button><button onclick="openForm()" class="open-button">Chat</button>
  <div id="myForm" class="chat-popup">
[your iframe code as belows from Microsoft Virtual Agent after Publishing]  
   <button onclick="closeForm()" class="closePopUp">X</button>
</div>
<p></p>

8. replace [your iframe code as belows from Microsoft Virtual Agent after Publishing] in above code with something like below-

VAPowerPortal8

9. Load the portal again you will find Chat option at the right-bottom corner. When you click on chat button it will open your chat bot.

This slideshow requires JavaScript.

Hope this will help…
Enjoy Ms CRM!!!

Follow on Facebook- FB: MSCRM16Tech

Color Picker in MS CRM ?

What is Issue?

How to add Color Picker in MS CRM?
There might be situations where you have to use colors in MS CRM and you wish to have wide range of colors. But in MS CRM there is no field or option available for now.

The Reason-

You have multiple custom controls available in MS CRM right now but there is no option for color picker and there is no way to add your own custom control for now.There is no out-of-box Color picker available in MS CRM.

Solution-

There are 2 solution for the color pickers –

  1. You can use Option set and provide user to select limited options of colors.
  2. You can use Custom web resource with your own libraries or open-source libraries.

The first option is reliable, but not much attractive if user wants some colorful UI and wide range of colors.

Using second option is not supported way but it gives you attractive interfaces.

There is open-source library available for color Picker – spectrum

You can use this library with dynamics CRM as web resources. You can have very nice color picker in MS CRM with these libraries.

ColorPicker

 

Hope this will help…

Enjoy Ms CRM!!!