How do I set up sliding messages?(QAB)

You can set up sliding messages in a single bar by pasting in some code and then adding in your messages.

Note, this works best without a button in your bar. It it recommended you remove the button.

To begin, click on More options to enlarge the message field.

Next, paste this code into the message field:

<script>

const messages = {
a:"", 
b:"", 
c:"", 
d:"", 
e:""};

let message = "";
var count = 0;
var maxCount = 5;
if(messages.b == "") {maxCount -= 4;}
else if(messages.c == "") {maxCount -= 3;}
else if(messages.d == "") {maxCount -= 2;}
else if(messages.e == "") {maxCount--;}

function myfunc() {

if(count == maxCount){count = 0};

switch(count) { 
case 0: message = messages.a; break; 
case 1: message = messages.b; break; 
case 2: message = messages.c; break; 
case 3: message = messages.d; break; 
case 4: message = messages.e; break;}
document.getElementById("msg").innerHTML = message;
count++;} 
myfunc();
setInterval(myfunc , 4200);
</script> 
<div id="msg">&nbsp;</div>

<style>
#qab_bar{overflow:hidden;}
#msg
{
display: inline-block;
animation-duration: 4200ms;
animation-name: slide;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes slide{
0%{
transform: translateX(calc(50vw + 50%));
}
5%{
transform: translateX(calc(50vw + 50%));
}
20%{
transform: translateX(0%);
}
80%{
transform: translateX(0%);
}
95%{
transform: translateX(calc(-50vw - 50%));
}
100%{
transform: translateX(calc(-50vw - 50%));
}

}
</style>

In the code you just pasted, at the top there is an alphabetical list:

const messages = {
a:"", 
b:"", 
c:"", 
d:"", 
e:""};

Inside those quotes is where you can insert your message.

const messages = {
a:"25% off this weekend!", 
b:"New products every Thursday", 
c:"Pre-order available.", 
d:"", 
e:""};

You can have up to 5 messages. Just leave those you don't need empty. The app will skip empty ones.

And that's it! Those lines will slide in, pause, and slide out.