Changing the footer.tpl doesn't work when enabling "Use Cache"

[Decepticon]

I added some code to footer.tpl and violet.css to display two buttons: "Call Now" and "Send Email Now," but the only way to make it work is by disabling "Use Cache." However, this makes the system very slow. I've tried "clear cache" and "rebuild," but they have no effect at all.

https://codepen.io/jiQuit/pen/JMeyvZ

[yuri]

You would need to build the client. It can be done only if you work on the repository.

Consider to load a custom JS script file and manipulate DOM. https://docs.espocrm.com/development...nt/#scriptlist

[Decepticon]

@yuri: Thank you for your response, but I just want to add a simple HTML code (or a textline) to the footer without using JavaScript.
Have you tried modifying the footer before? Does it work when "use cache" is enabled?

[yuri]

Most web apps today have sort of build/compile step. Modifying sources is not enough as code and some assets (in this case, it's template files) are bundled.

[Decepticon]

I would greatly appreciate it if you could guide me on how to correctly add a "Call Now" button to the footer. I'm not proficient in programming. I've been searching for a solution on the Espo forum for over a year, but so far, disabling "use cache" is the only feasible method I know.

https://codepen.io/jiQuit/pen/JMeyvZ

[yuri]

You add a JS script https://forum.espocrm.com/forum/deve...et-in-head-tag.

Then using DOM manipulations (native or JQuery) you can insert any HTML into the footer.

[Decepticon]

You add a JS script https://forum.espocrm.com/forum/deve...et-in-head-tag.

Then using DOM manipulations (native or JQuery) you can insert any HTML into the footer.

I followed your advice, but the "Call Now" button still isn't working as expected. It only appears for 0.5 seconds, similar to when I embed the code into the main.html

This is quite disappointing, at least the "Call Now" button works well when I embed the code into footer.tpl + disable "Use Cache,"

custom/Espo/Custom/Modules/Callnow/Resources/metadata/app/client.json

​
{
"scriptList": [
"__APPEND__",
"client/custom/Modules/Callnow/lib/js/callnow.js"
],
"developerModeScriptList": [
"__APPEND__",
"client/custom/Modules/Callnow/lib/js/callnow.js"
],
"cssList": [
"__APPEND__",
"client/custom/Modules/Callnow/lib/css/callnow.css"
],
"developerModeCssList": [
"__APPEND__",
"client/custom/Modules/Callnow/lib/css/callnow.css"
]
}
​

client/custom/Modules/Callnow/lib/js/callnow.js

$(document).ready(function() {
var htmlToInsert = '<a href="tel:911" mypage="" class="call-now" rel="nofollow"><div class="mypage-alo-phone"><div class="animated infinite pulse mypage-alo-ph-circle-fill"></div><div class="animated infinite tada mypage-alo-ph-img-circle"></div></div></a>';
$("footer").html(htmlToInsert);
});​ 

client/custom/Modules/Callnow/lib/css/callnow.css

@-webkit-keyframes pulse{
  0%{
    -webkit-transform: scale(0.9);
  }
  50%{
    -webkit-transform: scale(1.1);
  }
  100%{
    -webkit-transform: scale(0.9);
  }
}
.mypage-alo-phone {
    position: fixed;
    right: 30px;
    bottom:80px;
    visibility: visible;
    background-color: transparent;
    width: 110px;
    height: 110px;
    cursor: pointer;
    z-index: 200000 !important;
}
.mypage-alo-ph-img-circle {
        width: 30px;
        height: 30px;
        top: 43px;
        left: 43px;
        position: absolute;
        background:  url(https://i.imgur.com/J9AXAq7.png) no-repeat center center;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        border: 2px solid transparent;
        opacity: .7;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        background-color: #FF992C;
        background-size: 70%;
      -webkit-animation: pulse 01s infinite;
}
.mypage-alo-ph-circle-fill {
  
    width: 60px;
    height: 60px;
    top: 28px;
    left: 28px;
    position: absolute;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    background-color: rgba(241, 168, 5, 0.5);
    opacity: .75 !important;
    -webkit-animation: pulse 1s infinite;
}
.mypage-alo-ph-circle{
    width: 90px;
    height: 90px;
    top: 12px;
    left: 12px;
    position: absolute;
    background-color: transparent;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid rgba(30, 30, 30, 0.4);
    opacity: .1;
    border-color:#ffb56b;
    opacity: .5;
}
​

[yuri]

Script to add to scriptList.

const addToFooter = () => {
    const $footer = $('#footer');
    const $login = $('#login');

    if ($footer.length && !$login.length) {
        $footer.append(
            $('<span>').text('Hello!')
        );

        return;
    }

    setTimeout(() => addToFooter(), 100);
};

addToFooter();​

[Decepticon]

Script to add to scriptList.

const addToFooter = () => {
const $footer = $('#footer');
const $login = $('#login');

if ($footer.length && !$login.length) {
$footer.append(
$('<span>').text('Hello!')
);

return;
}

setTimeout(() => addToFooter(), 100);
};

addToFooter();​

This is the best Halloween gift for me. Thank you very much.


P/s: I have modified the script to be able to display the callnow button on the login page, and it's working quite well

function addToPage($target) {
    if ($target.find('#callnow').length ) {
    const phoneNumbers = ['910', '911', '912'];
    const phoneNumber = phoneNumbers[Math.floor(Math.random() * phoneNumbers.length)];
    const htmlToInsert = `<div id="callnow"><a href="tel:${phoneNumber}" mypage="" class="call-now" rel="nofollow"><div class="mypage-alo-phone"><div class="animated infinite pulse mypage-alo-ph-circle-fill"></div><div class="animated infinite tada mypage-alo-ph-img-circle"></div></div></a></div>`;
    $target.append(htmlToInsert);
    }
};

const addToLoginAndFooter = () => {
    const $login = $('#login');
    const $footer = $('#footer');

    if ($login.length) {
        addToPage($login);
    } else if ($footer.length && !$login.length) {
        addToPage($footer);
    }

    requestAnimationFrame(addToLoginAndFooter);
};

addToLoginAndFooter();​​