Chatwoot/app/javascript/widget/components/Branding.vue
Pranav Raj S f819bc0f33
Chore: Use installation config in frontend (#847)
* Use installation config in widget
* Add configuration for installation in UI
* Add config for mailer

Co-authored-by: Sojan <sojan@pepalo.com>
2020-05-12 01:31:40 +05:30

61 lines
1.2 KiB
Vue

<template>
<a
class="branding"
:href="`${globalConfig.widgetBrandURL}?utm_source=widget_branding`"
rel="noreferrer noopener nofollow"
target="_blank"
>
<img
:alt="globalConfig.installationName"
:src="globalConfig.logoThumbnail"
/>
<span>
{{ useInstallationName($t('POWERED_BY'), globalConfig.installationName) }}
</span>
</a>
</template>
<script>
import { mapGetters } from 'vuex';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
export default {
mixins: [globalConfigMixin],
computed: {
...mapGetters({
globalConfig: 'globalConfig/get',
}),
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '~widget/assets/scss/variables.scss';
.branding {
align-items: center;
color: $color-light-gray;
opacity: 0.9;
display: flex;
filter: grayscale(1);
font-size: $font-size-small;
justify-content: center;
text-align: center;
text-decoration: none;
padding: $space-normal 0 $space-slab;
cursor: pointer;
&:hover {
filter: grayscale(0);
opacity: 1;
color: $color-gray;
}
img {
margin-right: $space-smaller;
max-width: $space-slab;
max-height: $space-slab;
}
}
</style>