Hi @UmerJaved,
We can try a few different ways to achieve what you are expecting. One of the below ways is for your kind reference. I have tested it and it is initiating the conversation automatically. I have adjusted some CSS but you may need to adjust according to your need.
In Portal management:
1. Under Content > Content Snippets > New Content snippets
2. Lets call it as "ChatBotAuto" for an example
3. Choose type as HTML
4. Under HTML paste the below code. Note: I have added one css class to show it in the bottom right.
<title>Contoso Sample Web Chat</title>
<!-- This styling is for the canvas demonstration purposes. It is recommended
that style is moved to separate file for organization in larger projects -->
<style>
html, body {
height: 100%;
}
body {
margin: 10px;
}
h1 {
font-size: 16px;
font-family: Segoe UI;
line-height: 20px;
color: whitesmoke;
display: table-cell;
padding: 13px 0px 0px 20px;
}
.heading {
background-color: black;
height: 50px;
}
.main {
margin: 18px;
border-radius: 4px;
}
div[role="form"]{
background-color: black;
}
.pva-floating-style {
position: fixed;
bottom: 50px;
right: 0px;
box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px;
margin-right: 16px;
margin-bottom: 18px;
border: 2px solid #D2D0CE;
z-index: 9999;
}
#webchat {
position: relative;
height: calc(100% - 50px);
width: 100%;
top: 50px;
overflow: hidden;
}
</style><div class="pva-floating-style">
<div class="heading">
<!-- Change the h1 text to change the bot name -->
<h1>Contoso Bot Name</h1>
</div>
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
const styleOptions = {
// Add styleOptions to customize web chat canvas
hideUploadButton: true
};
// Add your BOT ID below
var BOT_ID = "";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
const store = window.WebChat.createStore(
{},
({ dispatch }) => next => action => {
if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
dispatch({
meta: {
method: "keyboard",
},
payload: {
activity: {
channelData: {
postBack: true,
},
//Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
name: 'startConversation',
type: "event"
},
},
type: "DIRECT_LINE/POST_ACTIVITY",
});
}
return next(action);
}
);
fetch(theURL)
.then(response => response.json())
.then(conversationInfo => {
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: conversationInfo.token,
}),
store: store,
styleOptions: styleOptions
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
</script>
Note: Under the first div you can see a custom css class name called "pva-floating-style"
In Portal Studio:
1. On your desired page> Under source code editor
all you need is add content snippet which we added via liquid tag like below
{{snippets["ChatBotAuto"]}}
Sync configuration and browse the website.
Output: (Automatic conversation started)
Hope it helps.
------------
If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.
