vue-intergrall-plugins 0.0.270 → 0.0.272

package/dist/vue-intergrall-plugins.ssr.js

@@ -1908,6 +1908,26 @@ var createPopper = /*#__PURE__*/popperGenerator({
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 var script$y = {
   data: function data() {
     return {
@@ -1930,6 +1950,11 @@ var script$y = {
       required: false,
       default: true
     },
+    hasSecondaryButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     allVariables: {
       type: Boolean,
       required: false,
@@ -2378,6 +2403,46 @@ var script$y = {
         }
     }
     return script;
+}function createInjectorSSR(context) {
+    if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__;
+    }
+    if (!context)
+        return () => { };
+    if (!('styles' in context)) {
+        context._styles = context._styles || {};
+        Object.defineProperty(context, 'styles', {
+            enumerable: true,
+            get: () => context._renderStyles(context._styles)
+        });
+        context._renderStyles = context._renderStyles || renderStyles;
+    }
+    return (id, style) => addStyle(id, style, context);
+}
+function addStyle(id, css, context) {
+    const group = css.media || 'default' ;
+    const style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
+    if (!style.ids.includes(id)) {
+        style.media = css.media;
+        style.ids.push(id);
+        let code = css.source;
+        style.css += code + '\n';
+    }
+}
+function renderStyles(styles) {
+    let css = '';
+    for (const key in styles) {
+        const style = styles[key];
+        css +=
+            '<style data-vue-ssr-id="' +
+                Array.from(style.ids).join(' ') +
+                '"' +
+                (style.media ? ' media="' + style.media + '"' : '') +
+                '>' +
+                style.css +
+                '</style>';
+    }
+    return css;
 }/* script */
 var __vue_script__$y = script$y;
 /* template */
@@ -2391,9 +2456,9 @@ var __vue_render__$y = function __vue_render__() {
 
   return _c('div', {
     staticClass: "ts-container"
-  }, [_vm._ssrNode("<div class=\"ts-content\">", "</div>", _vm._l(_vm.template.components, function (component, cIndex) {
-    return _vm._ssrNode("<div" + _vm._ssrClass(null, "" + (component.type == 'footer' ? 'order-1 custom-box-shadow-bottom' : '') + (_vm.template.components.length == 1 ? 'custom-box-shadow-bottom' : '')) + ">", "</div>", [component.type === 'header' ? _vm._ssrNode("<header id=\"template_header\"" + _vm._ssrClass(null, "" + (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '')) + ">", "</header>", _vm._l(component.parameters, function (param, pIndex) {
-      return _vm._ssrNode("<div>", "</div>", [param.type === 'text' ? [_vm._ssrNode(_vm.regexVars.test(param.text) ? "<div>" + _vm._s(param.text.replace(_vm.regexVars, "<div class='ts-content__var'>" + _vm.htmlInputString + _vm.varListValues + "</div>")) + "</div>" : "<p>" + _vm._s(param.text) + "</p>")] : param.type == 'image' ? _vm._ssrNode("<div class=\"ts-image-type\">", "</div>", [_vm._ssrNode("<input type=\"file\"" + _vm._ssrAttr("accept", _vm.acceptedExtensions) + " class=\"d-none\"> "), _vm.headerFiles[0] ? [_c('fa-icon', {
+  }, [_vm._ssrNode("<div class=\"ts-content\" data-v-ff9d2a84>", "</div>", _vm._l(_vm.template.components, function (component, cIndex) {
+    return _vm._ssrNode("<div" + _vm._ssrClass(null, "" + (component.type == 'footer' ? 'order-1 custom-box-shadow-bottom' : '') + (_vm.template.components.length == 1 ? 'custom-box-shadow-bottom' : '')) + " data-v-ff9d2a84>", "</div>", [component.type === 'header' ? _vm._ssrNode("<header id=\"template_header\"" + _vm._ssrClass(null, "" + (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '')) + " data-v-ff9d2a84>", "</header>", _vm._l(component.parameters, function (param, pIndex) {
+      return _vm._ssrNode("<div data-v-ff9d2a84>", "</div>", [param.type === 'text' ? [_vm._ssrNode(_vm.regexVars.test(param.text) ? "<div data-v-ff9d2a84>" + _vm._s(param.text.replace(_vm.regexVars, "<div class='ts-content__var'>" + _vm.htmlInputString + _vm.varListValues + "</div>")) + "</div>" : "<p data-v-ff9d2a84>" + _vm._s(param.text) + "</p>")] : param.type == 'image' ? _vm._ssrNode("<div class=\"ts-image-type\" data-v-ff9d2a84>", "</div>", [_vm._ssrNode("<input type=\"file\"" + _vm._ssrAttr("accept", _vm.acceptedExtensions) + " class=\"d-none\" data-v-ff9d2a84> "), _vm.headerFiles[0] ? [_c('fa-icon', {
         directives: [{
           name: "tippy",
           rawName: "v-tippy",
@@ -2432,16 +2497,16 @@ var __vue_render__$y = function __vue_render__() {
           }
         }
       })], 2) : _vm._e()], 2);
-    }), 0) : _vm._e(), _vm._ssrNode(" " + (component.type === 'body' ? "<section id=\"template_body\"" + _vm._ssrClass(null, (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '') + " " + (!_vm.hasButtonOrFooterComponent ? 'custom-footer-style custom-box-shadow-bottom custom-border-gray' : '')) + ">" + _vm._ssrList(component.parameters, function (param, pIndex) {
-      return "<div>" + (param.type === 'text' ? _vm.regexVars.test(param.text) ? "<div>" + _vm._s(param.text.replace(_vm.regexVars, "<div class='ts-content__var'>" + _vm.htmlInputString + _vm.varListValues + "</div>")) + "</div>" : "<p>" + _vm._s(param.text) + "</p>" : "<!---->") + "</div>";
-    }) + "</section>" : "<!---->") + " " + (component.type == 'button' ? "<section id=\"template_buttons\"" + _vm._ssrClass(null, (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '') + " " + (!_vm.hasFooterComponent ? 'custom-footer-style custom-box-shadow-bottom' : '')) + ">" + _vm._ssrList(component.parameters, function (param, pIndex) {
-      return "<div class=\"ts-button\">" + (param.text ? "<p>" + _vm._s(param.text) + "</p>" : "<!---->") + "</div>";
-    }) + "</section>" : "<!---->") + " " + (component.type == 'footer' ? "<footer id=\"template_footer\"" + _vm._ssrClass(null, "" + (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '')) + ">" + _vm._ssrList(component.parameters, function (param, pIndex) {
-      return "<div>" + (param.type == 'text' ? "<small>" + _vm._s(param.text) + "</small>" : "<!---->") + "</div>";
+    }), 0) : _vm._e(), _vm._ssrNode(" " + (component.type === 'body' ? "<section id=\"template_body\"" + _vm._ssrClass(null, (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '') + " " + (!_vm.hasButtonOrFooterComponent ? 'custom-footer-style custom-box-shadow-bottom custom-border-gray' : '')) + " data-v-ff9d2a84>" + _vm._ssrList(component.parameters, function (param, pIndex) {
+      return "<div data-v-ff9d2a84>" + (param.type === 'text' ? _vm.regexVars.test(param.text) ? "<div data-v-ff9d2a84>" + _vm._s(param.text.replace(_vm.regexVars, "<div class='ts-content__var'>" + _vm.htmlInputString + _vm.varListValues + "</div>")) + "</div>" : "<p data-v-ff9d2a84>" + _vm._s(param.text) + "</p>" : "<!---->") + "</div>";
+    }) + "</section>" : "<!---->") + " " + (component.type == 'button' ? "<section id=\"template_buttons\"" + _vm._ssrClass(null, (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '') + " " + (!_vm.hasFooterComponent ? 'custom-footer-style custom-box-shadow-bottom' : '')) + " data-v-ff9d2a84>" + _vm._ssrList(component.parameters, function (param, pIndex) {
+      return "<div class=\"ts-button\" data-v-ff9d2a84>" + (param.text ? "<p data-v-ff9d2a84>" + _vm._s(param.text) + "</p>" : "<!---->") + "</div>";
+    }) + "</section>" : "<!---->") + " " + (component.type == 'footer' ? "<footer id=\"template_footer\"" + _vm._ssrClass(null, "" + (_vm.template.components.length == 1 ? 'border-radius-5 custom-border-gray' : '')) + " data-v-ff9d2a84>" + _vm._ssrList(component.parameters, function (param, pIndex) {
+      return "<div data-v-ff9d2a84>" + (param.type == 'text' ? "<small data-v-ff9d2a84>" + _vm._s(param.text) + "</small>" : "<!---->") + "</div>";
     }) + "</footer>" : "<!---->"))], 2);
   }), 0), _vm._ssrNode(" "), _vm.hasButton ? _vm._ssrNode("<div" + _vm._ssrClass("tg-btn", {
     'small-btn': _vm.iconButton
-  }) + ">", "</div>", [_vm._ssrNode("<button>", "</button>", [!_vm.iconButton ? [_c('fa-icon', {
+  }) + " data-v-ff9d2a84>", "</div>", [_vm._ssrNode("<button data-v-ff9d2a84>", "</button>", [!_vm.iconButton ? [_c('fa-icon', {
     attrs: {
       "icon": ['fas', 'paper-plane']
     }
@@ -2449,32 +2514,46 @@ var __vue_render__$y = function __vue_render__() {
     attrs: {
       "icon": ['fas', 'paper-plane']
     }
-  })], 2)]) : _vm._e()], 2);
+  })], 2)]) : _vm._e(), _vm._ssrNode(" "), _vm.hasSecondaryButton ? _vm._ssrNode("<div" + _vm._ssrClass("tg-btn btn-red", {
+    'small-btn': _vm.iconButton
+  }) + " data-v-ff9d2a84>", "</div>", [_vm.hasSecondaryButton ? _vm._ssrNode("<button data-v-ff9d2a84>", "</button>", [!_vm.iconButton ? [_c('fa-icon', {
+    attrs: {
+      "icon": ['fas', 'paper-plane']
+    }
+  }), _vm._ssrNode(_vm._ssrEscape("\n        " + _vm._s(_vm.dictionary.btn_contatar_clientes_com_bot) + " \n      "))] : _c('fa-icon', {
+    attrs: {
+      "icon": ['fas', 'paper-plane']
+    }
+  })], 2) : _vm._e()]) : _vm._e()], 2);
 };
 
 var __vue_staticRenderFns__$y = [];
 /* style */
 
-var __vue_inject_styles__$y = undefined;
+var __vue_inject_styles__$y = function __vue_inject_styles__(inject) {
+  if (!inject) return;
+  inject("data-v-ff9d2a84_0", {
+    source: ".btn-red button[data-v-ff9d2a84]{background-color:red}.btn-red svg[data-v-ff9d2a84]{color:#b60000}",
+    map: undefined,
+    media: undefined
+  });
+};
 /* scoped */
 
-var __vue_scope_id__$y = undefined;
+
+var __vue_scope_id__$y = "data-v-ff9d2a84";
 /* module identifier */
 
-var __vue_module_identifier__$y = "data-v-c988759e";
+var __vue_module_identifier__$y = "data-v-ff9d2a84";
 /* functional template */
 
 var __vue_is_functional_template__$y = false;
-/* style inject */
-
-/* style inject SSR */
-
 /* style inject shadow dom */
 
 var __vue_component__$G = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$y,
   staticRenderFns: __vue_staticRenderFns__$y
-}, __vue_inject_styles__$y, __vue_script__$y, __vue_scope_id__$y, __vue_is_functional_template__$y, __vue_module_identifier__$y, false, undefined, undefined, undefined);
+}, __vue_inject_styles__$y, __vue_script__$y, __vue_scope_id__$y, __vue_is_functional_template__$y, __vue_module_identifier__$y, false, undefined, createInjectorSSR, undefined);
 
 var TemplateSingle = __vue_component__$G;var setResizeListeners = function setResizeListeners($el, inputClass, parentClass) {
   var inputTargets = $el.querySelectorAll(inputClass);
@@ -2663,47 +2742,7 @@ var categories=[{id:"people",name:"Smileys & People",emojis:["grinning","grin","
 //
 //
 //
-var script$x = {};function createInjectorSSR(context) {
-    if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-        context = __VUE_SSR_CONTEXT__;
-    }
-    if (!context)
-        return () => { };
-    if (!('styles' in context)) {
-        context._styles = context._styles || {};
-        Object.defineProperty(context, 'styles', {
-            enumerable: true,
-            get: () => context._renderStyles(context._styles)
-        });
-        context._renderStyles = context._renderStyles || renderStyles;
-    }
-    return (id, style) => addStyle(id, style, context);
-}
-function addStyle(id, css, context) {
-    const group = css.media || 'default' ;
-    const style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
-    if (!style.ids.includes(id)) {
-        style.media = css.media;
-        style.ids.push(id);
-        let code = css.source;
-        style.css += code + '\n';
-    }
-}
-function renderStyles(styles) {
-    let css = '';
-    for (const key in styles) {
-        const style = styles[key];
-        css +=
-            '<style data-vue-ssr-id="' +
-                Array.from(style.ids).join(' ') +
-                '"' +
-                (style.media ? ' media="' + style.media + '"' : '') +
-                '>' +
-                style.css +
-                '</style>';
-    }
-    return css;
-}/* script */
+var script$x = {};/* script */
 var __vue_script__$x = script$x;
 /* template */
 
@@ -9648,6 +9687,11 @@ var script$h = {
       type: Object,
       required: true
     },
+    hasSecondaryButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     hasButton: {
       type: Boolean,
       required: false,
@@ -9915,13 +9959,17 @@ var __vue_render__$h = function __vue_render__() {
       "iconButton": _vm.iconButton,
       "identifier": _vm.identifier,
       "allVariables": _vm.allVariables,
-      "dictionary": _vm.dictionary
+      "dictionary": _vm.dictionary,
+      "hasSecondaryButton": _vm.hasSecondaryButton
     },
     on: {
       "set-vars": _vm.setFinalMessage,
       "set-file-var": _vm.setFileVar,
       "click-trigger": function clickTrigger($event) {
         return _vm.$emit('click-trigger');
+      },
+      "dispatch-clients-with-bot": function dispatchClientsWithBot($event) {
+        return _vm.$emit('dispatch-clients-with-bot');
       }
     }
   })], 1) : _vm._ssrNode("<div class=\"tg-component\">", "</div>", [_c('TemplateMessage', {
@@ -9944,7 +9992,7 @@ var __vue_staticRenderFns__$h = [];
 
 var __vue_inject_styles__$h = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-5b32f202_0", {
+  inject("data-v-2135e54a_0", {
     source: "*{box-sizing:border-box}.toasted svg{margin-right:10px}.d-none{display:none}ul{list-style-type:none}h1,h2,h3,h4,p{margin:0;padding:0}.tg-container{width:100%;max-width:800px;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}.tg-options{width:100%;display:flex}.tg-options.column{flex-direction:column}.tg-options h4{margin-right:5px}.ts-image-type{display:flex;align-items:center}.ts-image-type img{cursor:pointer}.ts-image-type svg{font-size:25px;cursor:pointer}.ts-image-type .select-image{color:#838383}.color-red{color:#e74c3c}.color-blue{color:#007bff}.color-black{color:#333}.color-purple{color:#a312a3}.custom-tooltip-image{display:flex;justify-content:center;align-items:center;overflow:visible;padding:5px}.custom-tooltip-image img{max-width:75px;max-height:75px}.ts-button{background-color:#fff;border-radius:10px;display:flex;justify-content:center;align-items:center;padding:3px 15px;transition:background-color 150ms ease-in-out}.ts-button:hover{background-color:#fdfdfd}.tg-select{flex:1;height:34px;overflow:hidden}.tg-select .vs__dropdown-toggle{background-color:#fff;height:34px;overflow:hidden;display:flex;align-items:center}.tg-select .vs__selected-options{height:34px;overflow:hidden}.tg-select .vs__selected-options>span{white-space:nowrap;text-overflow:ellipsis;flex:1}.vs__dropdown-option.vs__dropdown-option--selected{background-color:#1a5fad!important;color:#fff}.vs__dropdown-menu li{padding:10px 15px}.vs__dropdown-option{transition:background-color 150ms;white-space:normal}.vs__dropdown-option:nth-child(odd){background-color:#f1f1f1}.vs__dropdown-option--highlight,.vs__dropdown-option--selected,.vs__dropdown-option:active,.vs__dropdown-option:focus,.vs__dropdown-option:hover{background-color:#5897fb!important;color:#fff}.tg-component{width:100%}.ts-container{width:100%;display:flex;justify-content:space-between}.ts-content{--border-color:#CCC;--background-color:#DFF0D8;--input-background-color:#FFF;--input-border-default:#007BFF;--input-border-error:#E74C3C;--placeholder-color:#BBB;--border-radius:5px;flex:2;font-size:.7rem;padding:10px 0;display:flex;flex-direction:column}.order-1{order:1}.custom-box-shadow-bottom{box-shadow:0 3px 4px -3px rgba(0,0,0,.3)}.custom-border-gray{border:1px solid var(--border-color)!important}.ts-content footer,.ts-content header,.ts-content section{padding:3px 5px;background-color:var(--background-color)}.ts-content header,.ts-content section{border-right:1px solid var(--border-color);border-left:1px solid var(--border-color)}.ts-content header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-top:1px solid var(--border-color)}.ts-content header{font-weight:550}.ts-content section{line-height:25px}.ts-content section.margin-bottom{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);border-bottom:1px solid var(--border-color)}.custom-footer-style,.ts-content footer{border:1px solid var(--border-color);border-top:unset;border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.ts-content input{border:1px solid transparent;outline:0;font-size:.8rem;padding:2.5px 5px;background-color:var(--input-background-color)}.ts-content input::placeholder{color:var(--placeholder-color)}.ts-content input.active,.ts-content input:focus{border:1px solid var(--input-border-default)}.ts-content input.invalid{border:1px solid var(--input-border-error)!important}.ts-content__var{display:inline-block;position:relative}.ts-dropdown{margin:0;padding:0;position:absolute;top:19px;left:0;background:#eee;width:100%;z-index:1;transition:all 150ms;visibility:hidden;opacity:0;list-style-type:none;border:1px solid #444;border-top:unset}.ts-dropdown li{width:100%;opacity:.9;cursor:pointer;font-weight:550;padding:2px 3px;font-size:.8rem;transition:background-color 150ms}.ts-dropdown li:focus,.ts-dropdown li:focus-within,.ts-dropdown li:hover{opacity:1;background-color:#555;color:#fff}.ts-dropdown.visible{visibility:visible;opacity:1}.tg-btn{width:40%;display:flex;justify-content:center;align-items:center}.tg-btn button{border:unset;display:block;min-width:180px;height:35px;padding:0 10px;font-weight:500;background-color:#007bff;color:#fff;transition:transform .3s ease-in-out;user-select:none;cursor:pointer;box-shadow:inset 0 -2px rgba(0,0,0,.2);opacity:.9;border-radius:2.5px}.tg-btn button>svg{margin-right:5px;color:#003166}.tg-btn button:hover{opacity:1}.tg-btn button:active{opacity:1;box-shadow:inset 0 -1px rgba(0,0,0,.2);-webkit-transform:translateY(1px);-moz-transform:translateY(1px);-o-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}.tg-btn button:active{opacity:1;box-shadow:inset 0 -1px rgba(0,0,0,.2);-webkit-transform:translateY(1px);-moz-transform:translateY(1px);-o-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}.tg-btn button:active,.tg-btn button:focus{outline:2px solid #000}.tg-btn.small-btn{width:auto;margin:0 5px}.tg-btn.small-btn svg{margin-right:0}.tg-btn.small-btn button{min-width:35px;width:35px;padding:0;display:flex;justify-content:center;align-items:center}.tm-container{border:1px solid var(--border-color);border-radius:5px;display:flex}",
     map: undefined,
     media: undefined
@@ -9956,7 +10004,7 @@ var __vue_inject_styles__$h = function __vue_inject_styles__(inject) {
 var __vue_scope_id__$h = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$h = "data-v-5b32f202";
+var __vue_module_identifier__$h = "data-v-2135e54a";
 /* functional template */
 
 var __vue_is_functional_template__$h = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.270",
+  "version": "0.0.272",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

package/src/lib-components/Templates/TemplateGenerator.vue

@@ -30,6 +30,8 @@
           :identifier="identifier" 
           :allVariables="allVariables"
           :dictionary="dictionary" 
+          :hasSecondaryButton="hasSecondaryButton"
+          @dispatch-clients-with-bot="$emit('dispatch-clients-with-bot')"
         />
       </div>
       <div class="tg-component" v-else>
@@ -51,6 +53,11 @@
         type: Object,
         required: true
       },
+      hasSecondaryButton: {
+        type: Boolean,
+        required: false,
+        default: false
+      },
       hasButton: {
         type: Boolean,
         required: false,
@@ -385,6 +392,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   width: 100%;
   display: flex;
   justify-content: space-between;
+  gap: 10px;
 }
 
 .ts-content {
@@ -495,7 +503,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   opacity: 1; 
 }
 .tg-btn {
-  width: 40%;
+  width: auto;
   display: flex;
   justify-content: center;
   align-items: center;

package/src/lib-components/Templates/TemplateSingle.vue

@@ -91,18 +91,51 @@
         </footer>
       </div>
     </div>
-    <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
-      <button @click="$emit('click-trigger')" ref="template-single-button">
-        <template v-if="!iconButton"> 
-          <fa-icon :icon="['fas', 'paper-plane']" />
-          {{ dictionary.btn_contatar_clientes }} 
-        </template>
-        <fa-icon v-else :icon="['fas', 'paper-plane']" />
-      </button>
+
+    <div class="container-btns">
+      <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
+        <button @click="$emit('click-trigger')" ref="template-single-button">
+          <template v-if="!iconButton"> 
+            <fa-icon :icon="['fas', 'paper-plane']" />
+            {{ dictionary.btn_contatar_clientes }} 
+          </template>
+          <fa-icon v-else :icon="['fas', 'paper-plane']" />
+        </button>
+        
+      </div>
+  
+      <div class="tg-btn btn-red" :class="{'small-btn' : iconButton}" v-if="hasSecondaryButton">
+        <button v-if="hasSecondaryButton" @click="$emit('dispatch-clients-with-bot')" ref="template-single-button-secondary">
+          <template v-if="!iconButton"> 
+            <fa-icon :icon="['fas', 'paper-plane']" />
+            {{ dictionary.btn_contatar_clientes_com_bot }} 
+          </template>
+          <fa-icon v-else :icon="['fas', 'paper-plane']" />
+        </button>
+      </div>
     </div>
+
   </div>
 </template>
 
+<style scoped>
+  .btn-red button {
+    background-color: red;
+  }
+  
+  .btn-red svg {
+    color: rgb(182, 0, 0);
+  }
+
+  .container-btns {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+</style>
+
 <script>
 export default {
   data() {
@@ -126,6 +159,11 @@ export default {
       required: false,
       default: true,
     },
+    hasSecondaryButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     allVariables: {
       type: Boolean,
       required: false,