...
The following code has been implemented in angular and can be easily converted to any other language. ( represents your organization name in the following code. For example, if your organization name is acme, replace all acme in the code with <org_name> with your organisation name (acme))
| Code Block |
|---|
<div id="chatbot-div-active" *ngIf="is_chatbot_active===true">
<iframe src="https://<org_name>.aibot.ascendo.ai/<email>"
class="chat-iframe" title="chatbot"></iframe>
</div>
<div id="chatbot-div-not-active">
<div *ngIf="is_chatbot_active===false">
<button mat-fab (click)="is_chatbot_active=true;"
style="color:#ffffff; background-color:#1a73e8;">
</button>
</div>
<div *ngIf="is_chatbot_active===true">
<button mat-fab (click)="is_chatbot_active=false;"
style="color:#ffffff;background-color:#1a73e8;">
</button>
</div>
</div>
<style type="text/css">
#chatbot-div-active{
box-sizing: border-box;
position: fixed;
right: 2rem;
bottom:88px;
z-index: 5;
width:320px;
max-width: 90vw;
height:500px;
}.chat-iframe {
box-sizing: border-box;
width: 100%;
height:100%;
background: transparent;
border:none;
}
#chatbot-div-not-active{
box-sizing: border-box;
position: fixed;
right:2rem;
bottom: 1rem;
z-index: 5;
}
</style> |
...