@carsy/task-completion-survey-banner
v1.3.0
Published
Task completion survey banner
Downloads
12
Readme
@carsy/task-completion-survey-banner
Usage
Default import
Use this when you have an import/export system setup.
import load from "@carsy/task-completion-survey-banner";
// writes html into #pl--task-completion-survey-banner
load();Vue component (your project needs to be setup to handle vue's SFC)
Use this when you have a vue setup that handles SFC using vue-loader.
<template>
<TaskCompletionSurveyBanner project="ipfs" />
</template>
<script>
import TaskCompletionSurveyBanner from "@carsy/task-completion-survey-banner/src/index.vue";
export default {
components: { TaskCompletionSurveyBanner }
}
</script>Script tag
Use this when you don't have an import/export system setup.
<head>
<script
src="https://unpkg.com/@carsy/task-completion-survey-banner"
async
onload="window.loadTaskCompletionSurveyBanner()"
></script>
</head>
<body>
<!-- Banner will be rendered here -->
<div id="pl--task-completion-survey-banner" data-project="ipfs"></div>
</body>Note: to avoid page load content shifting, add height and width to the element.
Parameters
Parameters can be used to customize the banner. The default values can be seen here. When using vue component, simply pass the parameters to the component as props:
<template>
<TaskCompletionSurveyBanner
project="ipfs"
url="https://formurl.com"
...
/>
</template>Or, using the html method directly:
<div
id="pl--task-completion-survey-banner"
data-project="ipfs"
data-url="https://formurl.com"
>
</div>project
Project id used to determine the saved form url from here, as well as apply default styles that better match the project's website.
url
Form url that the CTA will link to.
title
Title to be rendered on the banner.
text
Description text to be rendered on the banner.
linkText
The CTA's link text to rendered.
icon
Override the icon on the left side with an inline svg string.
To disable the icon and hide it use false.
showAfterDays
How many days need to pass for the banner to be shown again after it has been closed or clicked by the user.
UI Styling customization
No project specific styles are in place now, but customizing the banner is possible:
Using css variables
You can use css variables to customize simple css properties of the banner. Declare the variables using the main element id:
#pl--task-completion-survey-banner {
--transition: 300ms ease;
--color: #444;
--font-size: 1.1rem;
--font-family: inherit;
--padding: 1.562rem 2.5rem 1.562rem 1.75rem;
--margin: 1rem;
--background: #d5ecee;
--border-radius: 0.1rem;
--icon-size: 3rem;
--cta-background: #3e9096;
--cta-border-radius: 0.1rem;
--cta-color: #fff;
--cta-hover-opacity: 0.3;
--cta-hover-background: #fff;
--cta-hover-color: #ccc;
}
Using scoped classes
You can also override any styles using the following classes:
pl--task-completion-survey-banner--content
pl--task-completion-survey-banner--left
pl--task-completion-survey-banner--right
pl--task-completion-survey-banner--title
pl--task-completion-survey-banner--text
pl--task-completion-survey-banner--link
pl--task-completion-survey-banner--close-buttonCreating a framework specific component
If you want to create a framework specific component, you can use this:
import render, { context } from '@carsy/task-completion-survey-banner/src/render.js'
import '@carsy/task-completion-survey-banner/src/index.css'The render function accepts the rendering properties documented above as an object, and it returns the html as a string to be rendered onto any html element you want.
The context object provides the setup function that you can use to call after your app is mounted/ready. It receives an object with the config parameters.
Example: The built-in vue component.
Maintenance
Project setup
npm installPublish new release
npm run release