0.1.75 • Published 2 years ago
kahani-modulex v0.1.75
Kahani Story Widget
To implement the widget there are 3 steps:
- Add the
kahani-modulecustom element and astoryUrl(i.e.<kahani-module storyUrl="link-to-story-on-cdn"></kahani-module> - Add the script tag with the src pointing to the hosted bundle. (
<script src="https://gatewayx.github.io/kahani-module/kahani.js" />)
Example:
<kahani-module storyUrl="https://cdn.beta.kahaniapp.com/adam_cf.json"></kahani-module>
<script src="https://gatewayx.github.io/kahani-module/kahani.js">Make sure to add 2 and 3 at the bottom of your <body> so the container node has been mounted when the script fires.
Dev Commands
- Install dependencies:
yarn install - Run app locally:
yarn start - Build widget (bundles app and sticks into ./docs directory for GitHub Pages)
yarn build:widget. You will be asked if you want to increase the minor version number. Unless you have a good reason not to, you should always do this.
IMPORTANT
Before pushing up to GitHub, run yarn build:widget to generate the bundled css and js files in the /docs directory, otherwise your widget wont actually update anywhere. This will generate kahani.js and kahani.css
KahaniModule properties
A reference to the KahaniModule object is available as window.KahaniModule
KahaniModule.isOpen: A bool that is true when the widget is open.
You can set some callbacks:
KahaniModule.onOpen: A callback that fires when the widget is opened.KahaniModule.onClose: A callback that fires when the widget is closed.
Stories.json
{
"stories": {} // Story data
}Base CSS
If your base color is #5BBA9A and your contrast/accent colors are #FFA97D & #FFCB7D:
.kahani-thumbnail, .kahani-cta-button-container button, .kahani-cta-button-container button:hover, button.kahani-cta-email-modal-submit,
button.kahani-cta-email-modal-loading-close {
background-color: #5BBA9A;
}
.kahani-story-title-image {
border-color: #5BBA9A;
}
.kahani-photo-animated-overlay1 {
background-color: #FFA97D;
}
.kahani-photo-animated-overlay2 {
background-color: #FFCB7D;
}Data
CTA Types
- Normal email button (done)
- Floating link (done)
CTA Data
<CTA
id={cta.id}
type={cta.type}
link_text={cta.link_text}
link_url={cta.link_url}
email_modal_post_destination={cta.email_modal_post_destination}
email_modal_success_message={cta.email_modal_success_message}
email_modal_button_text={cta.email_modal_button_text}
email_modal_discount_amount={cta.email_modal_discount_amount}
stickyHeader={cta.stickyHeader}
stickyContent={cta.stickyContent}
onModalClose={props.onModalClose}
onModalOpen={props.onModalOpen}
/>Todo
- Email loading styles
- Bubble icon over story
- Bubble icon border
- Change default bubble border to transparent so we don't see colors flash on other sites
- Change default color from "poophoria white on green" to "black on white" so colors don't flash
0.1.75
2 years ago