I have a chat bot that I am working on that is using websdk and the images are added through a tool from Oracle which will not accept image attributes, you just put the image urls in the correct fields. However the images are resized to the tiny chatbot iframe and I would like to figure out how to enlarge them on click or hover. Outside of the tool I can apply Javascript and CSS, I just cant edit the HTML as far as I can tell because it's rendered by the tool. Here is what the tool looks like, see how its not using HTML, you just input the links? Oracle Tool
I used hover CSS and that words to enlarge the images but the image is still stuck inside the iframe sized so its not a real solution.
.oda-chat-card-image:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(2); /* Safari 3-8 */
transform: scale(2);
I found some code that puts the image into a target div which is the whole background iframe. I use this iframe to open links in the background of the chat bit that the bot suggests so the used stays in the same window. Which I like, but it requires the images have inline attributes that I cannot add.
I thought if I could use some Javascript to add the attributes to all images that I could get what I want but that seems to require adding unique IDs to the images but that is something I cannot do. I wondered what other possibilities anyone else could suggest.
The images do have a class so perhaps I can access them that way somehow. That's how I was able to apply the hover CSS class=oda-chat-card-image
This is the code I tried to use for opening the image on click in the background iframe which I named name="mainPageIframe" id="mainPageIframe"
const change = src => {
document.getElementById('mainPageIframe').src = src
If I inspect the image in the browser and manually add
onclick="change(this.src)"
to the end of an image,
Example code rendered by the chatbot tool but edited where I added the onclick attribute manually while in f12 inspecting the image.
<img dir="auto" class="oda-chat-card-image" src="https://eservice.xactware.com/esc/showme/images/Annotated/1379/Bot/X1ForgotPassword.png" onclick="change(this.src)" alt="Card image">
Example of adding the attribute manually to produce the result I want then when I click the image it opens in the background iframe. Doing this is the best thing I could think of but I would rather have the image open as an enlarged overlay over the whole screen instead of trapped inside the iframe. That's why I thought copying it to the main page iframe would be a solution. Any ideas on how I can apply
onclick="change(this.src)"
to all images in my webpage without unique id's or perhaps apply a different solution all together?
This is the HTML file I am working on that I can edit. It calls the bot contents by the URI and channelID. I am able to apply CSS to the items in the bot and Javascript, I just don't know how to get the images in the bnot to pop up or out side of the chatbot iframe and enlarge.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>ODA Live Chat Example</title>
</head>
<body>
<iframe name="mainPageIframe" id="mainPageIframe" src="https://docs.oracle.com/en/cloud/paas/digital-assistant/index.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:0;">
Your browser doesn't support iframes
</iframe>
<script src="https://polyfill.io/v3/polyfill.js?features=Number.isInteger%2Cdefault"></script>
<style>
.oda-chat-card-image:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(2); /* Safari 3-8 */
transform: scale(2);
}
.more
{
display: none;
}
img {
max-width: 100%;
height: auto;
}
.oda-chat-conversation {
background-color: #b3b8bd;
}
.oda-chat-left .oda-chat-message-bubble, .oda-chat-left .oda-chat-message-header, .oda-chat-left .oda-chat-message-footer, .oda-chat-card, .oda-chat-message-global-actions .oda-chat-action-postback {
background-color: #2e5a81;
}
.oda-chat-message-actions {
background-color: #1f3b54;
}
.oda-chat-message-global-actions .oda-chat-action-postback, .oda-chat-message-actions .oda-chat-action-postback {
background-color: #1f3b54;
margin: 0px;
font-weight: normal;
}
.oda-chat-action-postback {
background-color: #1f3b54;
}
.oda-chat-header {
background-color: #1f3b54;
}
.oda-chat-footer {
background-color: #1f3b54;
}
.oda-chat-card-image {
max-width: 100%;
height: auto;
}
.oda-chat-button {
height: 20px;
width: 100px;
outline: none;
background-color: transparent;
box-shadow: none;
}
@media screen and (min-width: 769px){
.oda-chat-button {
height: 96px;
width: 96px;
}
</style>
<script>
const change = src => {
document.getElementById('mainPageIframe').src = src
}
//Function to toggle full pargraph showing
function showHideParagraphs(lidx) {
var dots = document.getElementById("dots"+lidx);
var moreText = document.getElementById("more"+lidx);
var btnText = document.getElementById("myBtn"+lidx);
btnText.blur(); //loose focus
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Show less";
moreText.style.display = "inline";
}
}
//Function to split paragraphs with show more:
var gidx = 0;
function splitParagraph(txt) {
var paragraphs = txt.split("\n\n");
if (paragraphs.length > 1) {
var html = "<p>"+paragraphs[0]+'<span id="dots'+gidx+'">...</span></p><span id="more'+gidx+'" class="more">';
for (var idx = 1; idx < paragraphs.length; idx++) {
html += "<p>"+paragraphs[idx]+"</p>";
}
html += '</span><div class="oda-chat-message-actions"><button class="oda-chat-action-postback" onclick="showHideParagraphs('+gidx+')" id="myBtn'+gidx+'">Read more</button></div>';
gidx++;
return html;
}
else {
return txt;
}
}
//For typing indicator for keepTurn messages
var moreToCome = 0;
var typingIndicatorSafeguard=null;
function increaseMoreToCome(n){
moreToCome += n;
if (typingIndicatorSafeguard!=null){
clearTimeout(typingIndicatorSafeguard);
}
typingIndicatorSafeguard = setTimeout(function(){moreToCome=0;}, 30000); //In any case only keep generating typing indicators for 30 seconds
}
function decreaseMoreToCome(){
if (moreToCome>0){
moreToCome--;
setTimeout(function() {Bots.showTypingIndicator(30);}, 0);
}
}
//End of for typing indicator for keepTurn messages
var delegate = {
beforeDisplay: function(message) {
if (message.messagePayload.type=='text'){
//Split paragrahps with show-more
message.messagePayload.text = splitParagraph(message.messagePayload.text);
}
//Typing indicator for keepTurn messages
//Solution pending: https://bug.oraclecorp.com/pls/bug/webbug_edit.edit_info_top?rptno=30944113
if (message.messagePayload.text && message.messagePayload.text.match((/^((Greetings)|(Salutations)).*I am Artie/))){
increaseMoreToCome(2);
}
decreaseMoreToCome();
//End of typing indicator for keepTurn messages
return message;
},
beforeSend: function(message) {
//For typing indicator for keepTurn messages
moreToCome=0;
//End of for typing indicator for keepTurn messages
return message;
}
};
var chatWidgetWebSettings = {
URI: 'oda-12e973c924a245abbd61f357fbbe926a-da2.data.digitalassistant.oci.oraclecloud.com',
channelId: 'a61c229b-5469-4ea0-b62c-686bc3c1ad76',
enableClearMessage: true,
enableLocalConversationHistory: true,
enableTimestamp: true,
enableAttachment: false,
showTypingIndicator: true,
enableSpeech: true,
enableBotAudioResponse: true,
//openLinksInNewWindow: true, //Disabled as it's not really needed and is superseeding link onclick handler added through delegate.
enableAutocomplete: true,
disablePastActions: 'none',
delegate: delegate,
botButtonIcon: 'images/RbotIcon.png',
botIcon: 'images/RbotIcon.png',
logoIcon: 'images/RbotIcon.png',
personIcon: 'images/personIcon.png',
agentAvatar: 'images/woman2.png',
i18n: { "en": { chatTitle: 'Oracle Digital Assistant',
chatSubtitle: "Help on digital assistant learning"
}
},
typingIndicatorTimeout: 30,
messagePadding: '10px',
//theme: WebSDK.THEME.redwood-dark,
theme: 'redwood-dark',
linkHandler: { target: 'mainPageIframe' },
enableDraggableButton: true
};
function initSdk(name) {
// Default name is Bots
if (!name) {
name = 'Bots';
}
setTimeout(function (){
const Bots = new WebSDK(chatWidgetWebSettings); // Initiate library with configuration
Bots.on('widget:opened', function() {
console.log('Widget opened!');
if (Bots.getConversationHistory().messagesCount < 1){
console.log("Starting the conversation");
Bots.sendMessage('Hello', { hidden: true });
}
});
Bots.connect() // Connect to server
.then(function (){
console.log("Connection Successful");
})
.catch(function (reason){
console.log("Connection failed");
console.log(reason);
});
window[name] = Bots;
});
}
</script>
<script src="files/web-sdk_21.02.js" onload="initSdk()"></script>
</body>
</html>
