[{"data":1,"prerenderedAt":915},["ShallowReactive",2],{"navigation":3,"/cancel-flows/custom-styling":310,"/cancel-flows/custom-styling-surround":912},[4,13,161,197,211,236,290,300],{"title":5,"_path":6,"children":7,"_id":12,"description":11},"Getting Started","/getting-started",[8],{"title":9,"_path":6,"_id":10,"description":11},"Overview","content:1.getting-started:1.index.md","Everything you need to know about integrating Churnkey with your product and billing stack.","content:1.getting-started:_dir.yml",{"title":14,"_path":15,"children":16,"_id":160},"Cancel Flows","/cancel-flows",[17,22,27,32,37,42,47,52,57,62,67,72,116,130],{"title":18,"_path":19,"_id":20,"description":21},"Quick Start Guide","/cancel-flows/quick-start-guide","content:2.cancel-flows:1.quick-start-guide.md","A 3-step guide on how to implement Cancel Flows in your website",{"title":23,"_path":24,"_id":25,"description":26},"Cancel Flow Structure","/cancel-flows/flow-configuration","content:2.cancel-flows:2.flow configuration.md","Learn about the available components that make up a Cancel Flow, from initial offers to cancellation confirmation, and how each step contributes to the overall flow.",{"title":28,"_path":29,"_id":30,"description":31},"Configuration Options","/cancel-flows/further-configuration","content:2.cancel-flows:3.further-configuration.md","Additional details for all of the following options are included below.",{"title":33,"_path":34,"_id":35,"description":36},"Custom Styling","/cancel-flows/custom-styling","content:2.cancel-flows:4.custom-styling.md","Brand your Churnkey Cancel Flow with your own CSS",{"title":38,"_path":39,"_id":40,"description":41},"Managed Email Flow","/cancel-flows/email-verified-cancel-flow","content:2.cancel-flows:6.email-verified-cancel-flow.md","Our managed email based setup takes care of customer verification for you with an email verification code.",{"title":43,"_path":44,"_id":45,"description":46},"A/B Testing","/cancel-flows/a-b-testing","content:2.cancel-flows:7.a-b-testing.md","Run controlled experiments to optimize your Cancel Flows and maximize customer retention.",{"title":48,"_path":49,"_id":50,"description":51},"Testing","/cancel-flows/cancel-flow-testing","content:2.cancel-flows:8.cancel-flow-testing.md","Ensure that your Cancel Flow is working as intended before going live.",{"title":53,"_path":54,"_id":55,"description":56},"Pause Wall","/cancel-flows/pause-wall","content:2.cancel-flows:9.pause-wall.md","Block access to your application during subscription pauses",{"title":58,"_path":59,"_id":60,"description":61},"Click-to-Cancel Compliance","/cancel-flows/click-to-cancel","content:2.cancel-flows:10.click-to-cancel.md","Implement automatic compliance with global subscription cancellation requirements",{"title":63,"_path":64,"_id":65,"description":66},"Structured Follow-Up Questions","/cancel-flows/structured-follow-up-questions","content:2.cancel-flows:11.structured-follow-up-questions.md","Collect deeper cancellation insights and deliver targeted retention offers with a second layer of predefined follow-up options in your cancel flow survey.",{"title":68,"_path":69,"_id":70,"description":71},"Adaptive Offers","/cancel-flows/adaptive-offers","content:2.cancel-flows:adaptive-offers.md","AI-powered discount optimization that automatically finds the perfect offer for each customer",{"title":73,"_path":74,"children":75},"Analytics","/cancel-flows/analytics",[76,81,86,91,96,101,106,111],{"title":77,"_path":78,"_id":79,"description":80},"Boosted Revenue","/cancel-flows/analytics/average-boosted-revenue","content:2.cancel-flows:analytics:1.average-boosted-revenue.md","Measure the long-term value of retained subscribers",{"title":82,"_path":83,"_id":84,"description":85},"Save Rate","/cancel-flows/analytics/save-rate","content:2.cancel-flows:analytics:2.save-rate.md","The percentage of customers that your Cancel Flows saved from cancellation",{"title":87,"_path":88,"_id":89,"description":90},"Reactivation Rate","/cancel-flows/analytics/reactivation-rate","content:2.cancel-flows:analytics:3.reactivation-rate.md","The percentage of customers who pay at least one invoice after being saved",{"title":92,"_path":93,"_id":94,"description":95},"Sessions","/cancel-flows/analytics/session-outcomes","content:2.cancel-flows:analytics:4.session-outcomes.md","Track each interaction that a customer has with your Cancel Flows",{"title":97,"_path":98,"_id":99,"description":100},"Cancellation Trends","/cancel-flows/analytics/cancellation-trends","content:2.cancel-flows:analytics:5.cancellation-trends.md","Analyze and interpret the selection rates and trends for cancellation reasons in your Cancel Flows.",{"title":102,"_path":103,"_id":104,"description":105},"Feedback AI","/cancel-flows/analytics/feedback-ai","content:2.cancel-flows:analytics:6.feedback-ai.md","Transform customer feedback into actionable insights with AI-powered categorization and analysis",{"title":107,"_path":108,"_id":109,"description":110},"Response Flow","/cancel-flows/analytics/response-flow","content:2.cancel-flows:analytics:7.response-flow.md","Visualize how customers move from primary cancellation reasons to specific follow-up selections with the Sankey diagram",{"title":112,"_path":113,"_id":114,"description":115},"Response Explorer","/cancel-flows/analytics/response-explorer","content:2.cancel-flows:analytics:8.response-explorer.md","Drill into individual follow-up responses with the Treemap visualization, search, trend analysis, and MRR impact sorting",{"title":117,"_path":118,"children":119},"Multi Language Support","/cancel-flows/multi-language-support",[120,125],{"title":121,"_path":122,"_id":123,"description":124},"Manual Translations","/cancel-flows/multi-language-support/multi-language-support","content:2.cancel-flows:multi-language-support:5.multi-language-support.md","Support multiple languages.",{"title":126,"_path":127,"_id":128,"description":129},"Automatic Translations","/cancel-flows/multi-language-support/automatic-translation","content:2.cancel-flows:multi-language-support:automatic-translation.md","Enable AI-powered multilingual support for your Cancel Flows with a single toggle.",{"title":131,"_path":132,"children":133,"_id":159},"Offers","/cancel-flows/offers",[134,139,144,149,154],{"title":135,"_path":136,"_id":137,"description":138},"Discount","/cancel-flows/offers/discounts","content:2.cancel-flows:offers:discounts.md","Offer targeted subscription discounts to reduce churn and increase customer retention",{"title":140,"_path":141,"_id":142,"description":143},"Hidden Plans","/cancel-flows/offers/hidden-plans","content:2.cancel-flows:offers:hidden-plans.md","Use the Switch Subscription Plan offer to present exclusive, non-public plans to customers during cancellation",{"title":145,"_path":146,"_id":147,"description":148},"Pause Subscription","/cancel-flows/offers/pause-subscription","content:2.cancel-flows:offers:pause-subscription.md","Temporarily suspend subscription payments without canceling the service",{"title":150,"_path":151,"_id":152,"description":153},"Switch Subscription Plan","/cancel-flows/offers/switch-subscription","content:2.cancel-flows:offers:switch-subscription.md","Allow customers to change to a different subscription plan during the cancellation flow to retain them with a more suitable option",{"title":155,"_path":156,"_id":157,"description":158},"Trial Extension","/cancel-flows/offers/trial-extension","content:2.cancel-flows:offers:trial-extension.md","Extend customer trial periods to reduce churn and increase conversion rates during the critical trial-to-paid transition","content:2.cancel-flows:offers:_dir.yml","content:2.cancel-flows:_dir.yml",{"title":162,"_path":163,"children":164,"_id":196},"Payment Recovery","/failed-payment-recovery",[165,169,174,179,184,188],{"title":5,"_path":166,"_id":167,"description":168},"/failed-payment-recovery/payment-recovery","content:3.failed-payment-recovery:1.payment-recovery.md","Recover failed payment revenue, automatically.",{"title":170,"_path":171,"_id":172,"description":173},"Customize your Campaigns","/failed-payment-recovery/campaign-customization","content:3.failed-payment-recovery:2.campaign-customization.md","Customize your Payment Recovery Campaigns to match the unique needs of your individual customers.",{"title":175,"_path":176,"_id":177,"description":178},"Failed Payment Wall","/failed-payment-recovery/failed-payment-wall","content:3.failed-payment-recovery:3.failed-payment-wall.md","Block access to your application when payments fail",{"title":180,"_path":181,"_id":182,"description":183},"Billing Contact API","/failed-payment-recovery/billing-contact-api","content:3.failed-payment-recovery:4.billing-contact-api.md","Send Payment Recovery emails to multiple billing contacts",{"title":43,"_path":185,"_id":186,"description":187},"/failed-payment-recovery/ab-testing","content:3.failed-payment-recovery:5.ab-testing.md","Optimize your payment recovery campaigns through controlled experiments that maximize revenue recovery.",{"title":73,"_path":189,"children":190},"/failed-payment-recovery/analytics",[191],{"title":192,"_path":193,"_id":194,"description":195},"Overall Performance","/failed-payment-recovery/analytics/overview","content:3.failed-payment-recovery:analytics:1.overview.md","Key performance metrics for your Payment Recovery campaigns","content:3.failed-payment-recovery:_dir.yml",{"title":198,"_path":199,"children":200,"_id":210},"Reactivations","/reactivations",[201,205],{"title":5,"_path":202,"_id":203,"description":204},"/reactivations/reactivations","content:4.reactivations:1.reactivations.md","Churnkey helps you to recover unsubscribed customers with easy, customizable Reactivation Email Campaigns.",{"title":206,"_path":207,"_id":208,"description":209},"Customization","/reactivations/campaign-customization-guide","content:4.reactivations:2.campaign-customization-guide.md","Customize your Reactivation Campaigns to match the individual needs of your customers.","content:4.reactivations:_dir.yml",{"title":212,"_path":213,"children":214,"_id":235},"Data Integrations","/data-integrations",[215,220,225,230],{"title":216,"_path":217,"_id":218,"description":219},"Data API","/data-integrations/data-api","content:6.data-integrations:1.data-api.md","Access your data through our API.",{"title":221,"_path":222,"_id":223,"description":224},"Slack notifications","/data-integrations/slack","content:6.data-integrations:2.slack.md","Connect Churnkey with your organization's Slack and to send session notifications to a specific channel.",{"title":226,"_path":227,"_id":228,"description":229},"Webhooks","/data-integrations/webhooks","content:6.data-integrations:2.webhooks.md","Churnkey can send webhooks to automatically notify your application whenever a customer completes a session.",{"title":231,"_path":232,"_id":233,"description":234},"Event Tracking","/data-integrations/event-tracking","content:6.data-integrations:3.event-tracking.md","Track your customers' key-value metrics on a per customer basis.","content:6.data-integrations:_dir.yml",{"title":237,"_path":238,"children":239,"_id":289},"Billing Providers","/billing-providers",[240,245,250,255,260,265,270,275],{"title":241,"_path":242,"_id":243,"description":244},"Payment Providers","/billing-providers/payment-provider-overview","content:7.billing-providers:1.payment-provider-overview.md","Feature support for Stripe, Chargebee, Paddle, and Braintree",{"title":246,"_path":247,"_id":248,"description":249},"Stripe","/billing-providers/stripe","content:7.billing-providers:3.stripe.md","Integrate Churnkey with your Stripe account",{"title":251,"_path":252,"_id":253,"description":254},"Chargebee","/billing-providers/chargebee","content:7.billing-providers:4.chargebee.md","Integrate Churnkey with your Chargebee account",{"title":256,"_path":257,"_id":258,"description":259},"Paddle Classic","/billing-providers/paddle-classic","content:7.billing-providers:5.paddle-classic.md","Integrate Churnkey with your Paddle Classic account",{"title":261,"_path":262,"_id":263,"description":264},"Paddle Billing","/billing-providers/paddle-billing","content:7.billing-providers:6.paddle-billing.md","Integrate Churnkey with your Paddle Billing account",{"title":266,"_path":267,"_id":268,"description":269},"Braintree","/billing-providers/braintree","content:7.billing-providers:7.braintree.md","Integrate Churnkey with your Braintree account",{"title":271,"_path":272,"_id":273,"description":274},"Maxio","/billing-providers/maxio","content:7.billing-providers:8.maxio.md","Integrate Churnkey with your Maxio (formerly Chargify) account",{"title":276,"_path":277,"children":278},"Direct Connect","/billing-providers/direct-connect",[279,284],{"title":280,"_path":281,"_id":282,"description":283},"Churnkey Direct","/billing-providers/direct-connect/direct","content:7.billing-providers:9.direct-connect:1.direct.md","Integrate Churnkey with any billing system using Direct mode",{"title":285,"_path":286,"_id":287,"description":288},"Direct Mode Examples","/billing-providers/direct-connect/direct-examples","content:7.billing-providers:9.direct-connect:2.direct-examples.md","Real-world examples for common subscription scenarios","content:7.billing-providers:_dir.yml",{"title":291,"_path":292,"children":293,"_id":299},"Account","/account",[294],{"title":295,"_path":296,"_id":297,"description":298},"Multi-Workspace Support","/account/multi-workspace-support","content:8.account:1.multi-workspace-support.md","Use one email address to access multiple Churnkey workspaces and switch between them instantly.","content:8.account:_dir.yml",{"title":301,"_path":302,"children":303,"_id":309},"Support","/support",[304],{"title":305,"_path":306,"_id":307,"description":308},"Frequently Asked Questions","/support/faqs","content:9.support:1.faqs.md","We want setting up Churnkey to be a breeze.","content:9.support:_dir.yml",{"_path":34,"_dir":311,"_draft":312,"_partial":312,"_locale":313,"title":33,"description":36,"body":314,"_type":906,"_id":35,"_source":907,"_file":908,"_stem":909,"_extension":910,"sitemap":911},"cancel-flows",false,"",{"type":315,"children":316,"toc":902},"root",[317,326,771,781,787,885,896],{"type":318,"tag":319,"props":320,"children":322},"element","h2",{"id":321},"css-classes-available",[323],{"type":324,"value":325},"text","CSS Classes Available",{"type":318,"tag":327,"props":328,"children":332},"pre",{"className":329,"code":330,"language":331,"meta":313,"style":313},"language-css shiki shiki-themes github-light-default github-light-default github-dark-default","## General Components\n.ck-style ## applies to everything\n.ck-modal ## the embed pop-up\n.ck-background-overlay ## the partially transparent overlay\n.ck-step ## a wrapper around all content\n\n## specific steps in flow\n.ck-pause-step\n.ck-discount-step\n.ck-contact-step\n.ck-redirect-step\n.ck-survey-step\n.ck-freeform-step\n.ck-confirm-step\n\n## while a customer subscription is being modified\n.ck-progress-step\n\n## once flow is complete - after discount, pause, cancel\n.ck-complete-step\n\n## if error is shown at any point (hopefully customers will never see this)\n.ck-error-step\n\n## Step components\n.ck-step-header\n.ck-step-header-text\n.ck-brand-image\n.ck-brand-image-header\n.ck-step-description-text\n.ck-step-body\n.ck-step-footer\n\n## Button variations\n.ck-button\n.ck-text-button ## custom color\n.ck-black-text-button\n.ck-primary-button ## custom color\n.ck-black-primary-button\n.ck-gray-primary-button\n","css",[333],{"type":318,"tag":334,"props":335,"children":336},"code",{"__ignoreMap":313},[337,349,364,389,403,432,442,451,460,469,478,487,496,505,514,522,540,549,557,566,575,583,592,601,609,618,627,636,645,654,663,672,681,689,708,717,731,740,753,762],{"type":318,"tag":338,"props":339,"children":342},"span",{"class":340,"line":341},"line",1,[343],{"type":318,"tag":338,"props":344,"children":346},{"style":345},"--shiki-light:#1F2328;--shiki-default:#1F2328;--shiki-dark:#E6EDF3",[347],{"type":324,"value":348},"## General Components\n",{"type":318,"tag":338,"props":350,"children":352},{"class":340,"line":351},2,[353,359],{"type":318,"tag":338,"props":354,"children":356},{"style":355},"--shiki-light:#0550AE;--shiki-default:#0550AE;--shiki-dark:#79C0FF",[357],{"type":324,"value":358},".ck-style",{"type":318,"tag":338,"props":360,"children":361},{"style":345},[362],{"type":324,"value":363}," ## applies to everything\n",{"type":318,"tag":338,"props":365,"children":367},{"class":340,"line":366},3,[368,373,378,384],{"type":318,"tag":338,"props":369,"children":370},{"style":355},[371],{"type":324,"value":372},".ck-modal",{"type":318,"tag":338,"props":374,"children":375},{"style":345},[376],{"type":324,"value":377}," ## the ",{"type":318,"tag":338,"props":379,"children":381},{"style":380},"--shiki-light:#116329;--shiki-default:#116329;--shiki-dark:#7EE787",[382],{"type":324,"value":383},"embed",{"type":318,"tag":338,"props":385,"children":386},{"style":380},[387],{"type":324,"value":388}," pop-up\n",{"type":318,"tag":338,"props":390,"children":392},{"class":340,"line":391},4,[393,398],{"type":318,"tag":338,"props":394,"children":395},{"style":355},[396],{"type":324,"value":397},".ck-background-overlay",{"type":318,"tag":338,"props":399,"children":400},{"style":345},[401],{"type":324,"value":402}," ## the partially transparent overlay\n",{"type":318,"tag":338,"props":404,"children":406},{"class":340,"line":405},5,[407,412,417,422,427],{"type":318,"tag":338,"props":408,"children":409},{"style":355},[410],{"type":324,"value":411},".ck-step",{"type":318,"tag":338,"props":413,"children":414},{"style":345},[415],{"type":324,"value":416}," ## ",{"type":318,"tag":338,"props":418,"children":419},{"style":380},[420],{"type":324,"value":421},"a",{"type":318,"tag":338,"props":423,"children":424},{"style":345},[425],{"type":324,"value":426}," wrapper around all ",{"type":318,"tag":338,"props":428,"children":429},{"style":380},[430],{"type":324,"value":431},"content\n",{"type":318,"tag":338,"props":433,"children":435},{"class":340,"line":434},6,[436],{"type":318,"tag":338,"props":437,"children":439},{"emptyLinePlaceholder":438},true,[440],{"type":324,"value":441},"\n",{"type":318,"tag":338,"props":443,"children":445},{"class":340,"line":444},7,[446],{"type":318,"tag":338,"props":447,"children":448},{"style":345},[449],{"type":324,"value":450},"## specific steps in flow\n",{"type":318,"tag":338,"props":452,"children":454},{"class":340,"line":453},8,[455],{"type":318,"tag":338,"props":456,"children":457},{"style":355},[458],{"type":324,"value":459},".ck-pause-step\n",{"type":318,"tag":338,"props":461,"children":463},{"class":340,"line":462},9,[464],{"type":318,"tag":338,"props":465,"children":466},{"style":355},[467],{"type":324,"value":468},".ck-discount-step\n",{"type":318,"tag":338,"props":470,"children":472},{"class":340,"line":471},10,[473],{"type":318,"tag":338,"props":474,"children":475},{"style":355},[476],{"type":324,"value":477},".ck-contact-step\n",{"type":318,"tag":338,"props":479,"children":481},{"class":340,"line":480},11,[482],{"type":318,"tag":338,"props":483,"children":484},{"style":355},[485],{"type":324,"value":486},".ck-redirect-step\n",{"type":318,"tag":338,"props":488,"children":490},{"class":340,"line":489},12,[491],{"type":318,"tag":338,"props":492,"children":493},{"style":355},[494],{"type":324,"value":495},".ck-survey-step\n",{"type":318,"tag":338,"props":497,"children":499},{"class":340,"line":498},13,[500],{"type":318,"tag":338,"props":501,"children":502},{"style":355},[503],{"type":324,"value":504},".ck-freeform-step\n",{"type":318,"tag":338,"props":506,"children":508},{"class":340,"line":507},14,[509],{"type":318,"tag":338,"props":510,"children":511},{"style":355},[512],{"type":324,"value":513},".ck-confirm-step\n",{"type":318,"tag":338,"props":515,"children":517},{"class":340,"line":516},15,[518],{"type":318,"tag":338,"props":519,"children":520},{"emptyLinePlaceholder":438},[521],{"type":324,"value":441},{"type":318,"tag":338,"props":523,"children":525},{"class":340,"line":524},16,[526,531,535],{"type":318,"tag":338,"props":527,"children":528},{"style":345},[529],{"type":324,"value":530},"## while ",{"type":318,"tag":338,"props":532,"children":533},{"style":380},[534],{"type":324,"value":421},{"type":318,"tag":338,"props":536,"children":537},{"style":345},[538],{"type":324,"value":539}," customer subscription is being modified\n",{"type":318,"tag":338,"props":541,"children":543},{"class":340,"line":542},17,[544],{"type":318,"tag":338,"props":545,"children":546},{"style":355},[547],{"type":324,"value":548},".ck-progress-step\n",{"type":318,"tag":338,"props":550,"children":552},{"class":340,"line":551},18,[553],{"type":318,"tag":338,"props":554,"children":555},{"emptyLinePlaceholder":438},[556],{"type":324,"value":441},{"type":318,"tag":338,"props":558,"children":560},{"class":340,"line":559},19,[561],{"type":318,"tag":338,"props":562,"children":563},{"style":345},[564],{"type":324,"value":565},"## once flow is complete - after discount, pause, cancel\n",{"type":318,"tag":338,"props":567,"children":569},{"class":340,"line":568},20,[570],{"type":318,"tag":338,"props":571,"children":572},{"style":355},[573],{"type":324,"value":574},".ck-complete-step\n",{"type":318,"tag":338,"props":576,"children":578},{"class":340,"line":577},21,[579],{"type":318,"tag":338,"props":580,"children":581},{"emptyLinePlaceholder":438},[582],{"type":324,"value":441},{"type":318,"tag":338,"props":584,"children":586},{"class":340,"line":585},22,[587],{"type":318,"tag":338,"props":588,"children":589},{"style":345},[590],{"type":324,"value":591},"## if error is shown at any point (hopefully customers will never see this)\n",{"type":318,"tag":338,"props":593,"children":595},{"class":340,"line":594},23,[596],{"type":318,"tag":338,"props":597,"children":598},{"style":355},[599],{"type":324,"value":600},".ck-error-step\n",{"type":318,"tag":338,"props":602,"children":604},{"class":340,"line":603},24,[605],{"type":318,"tag":338,"props":606,"children":607},{"emptyLinePlaceholder":438},[608],{"type":324,"value":441},{"type":318,"tag":338,"props":610,"children":612},{"class":340,"line":611},25,[613],{"type":318,"tag":338,"props":614,"children":615},{"style":345},[616],{"type":324,"value":617},"## Step components\n",{"type":318,"tag":338,"props":619,"children":621},{"class":340,"line":620},26,[622],{"type":318,"tag":338,"props":623,"children":624},{"style":355},[625],{"type":324,"value":626},".ck-step-header\n",{"type":318,"tag":338,"props":628,"children":630},{"class":340,"line":629},27,[631],{"type":318,"tag":338,"props":632,"children":633},{"style":355},[634],{"type":324,"value":635},".ck-step-header-text\n",{"type":318,"tag":338,"props":637,"children":639},{"class":340,"line":638},28,[640],{"type":318,"tag":338,"props":641,"children":642},{"style":355},[643],{"type":324,"value":644},".ck-brand-image\n",{"type":318,"tag":338,"props":646,"children":648},{"class":340,"line":647},29,[649],{"type":318,"tag":338,"props":650,"children":651},{"style":355},[652],{"type":324,"value":653},".ck-brand-image-header\n",{"type":318,"tag":338,"props":655,"children":657},{"class":340,"line":656},30,[658],{"type":318,"tag":338,"props":659,"children":660},{"style":355},[661],{"type":324,"value":662},".ck-step-description-text\n",{"type":318,"tag":338,"props":664,"children":666},{"class":340,"line":665},31,[667],{"type":318,"tag":338,"props":668,"children":669},{"style":355},[670],{"type":324,"value":671},".ck-step-body\n",{"type":318,"tag":338,"props":673,"children":675},{"class":340,"line":674},32,[676],{"type":318,"tag":338,"props":677,"children":678},{"style":355},[679],{"type":324,"value":680},".ck-step-footer\n",{"type":318,"tag":338,"props":682,"children":684},{"class":340,"line":683},33,[685],{"type":318,"tag":338,"props":686,"children":687},{"emptyLinePlaceholder":438},[688],{"type":324,"value":441},{"type":318,"tag":338,"props":690,"children":692},{"class":340,"line":691},34,[693,698,703],{"type":318,"tag":338,"props":694,"children":695},{"style":345},[696],{"type":324,"value":697},"## ",{"type":318,"tag":338,"props":699,"children":700},{"style":380},[701],{"type":324,"value":702},"Button",{"type":318,"tag":338,"props":704,"children":705},{"style":345},[706],{"type":324,"value":707}," variations\n",{"type":318,"tag":338,"props":709,"children":711},{"class":340,"line":710},35,[712],{"type":318,"tag":338,"props":713,"children":714},{"style":355},[715],{"type":324,"value":716},".ck-button\n",{"type":318,"tag":338,"props":718,"children":720},{"class":340,"line":719},36,[721,726],{"type":318,"tag":338,"props":722,"children":723},{"style":355},[724],{"type":324,"value":725},".ck-text-button",{"type":318,"tag":338,"props":727,"children":728},{"style":345},[729],{"type":324,"value":730}," ## custom color\n",{"type":318,"tag":338,"props":732,"children":734},{"class":340,"line":733},37,[735],{"type":318,"tag":338,"props":736,"children":737},{"style":355},[738],{"type":324,"value":739},".ck-black-text-button\n",{"type":318,"tag":338,"props":741,"children":743},{"class":340,"line":742},38,[744,749],{"type":318,"tag":338,"props":745,"children":746},{"style":355},[747],{"type":324,"value":748},".ck-primary-button",{"type":318,"tag":338,"props":750,"children":751},{"style":345},[752],{"type":324,"value":730},{"type":318,"tag":338,"props":754,"children":756},{"class":340,"line":755},39,[757],{"type":318,"tag":338,"props":758,"children":759},{"style":355},[760],{"type":324,"value":761},".ck-black-primary-button\n",{"type":318,"tag":338,"props":763,"children":765},{"class":340,"line":764},40,[766],{"type":318,"tag":338,"props":767,"children":768},{"style":355},[769],{"type":324,"value":770},".ck-gray-primary-button\n",{"type":318,"tag":319,"props":772,"children":774},{"id":773},"example-css-override",[775],{"type":318,"tag":776,"props":777,"children":778},"strong",{},[779],{"type":324,"value":780},"Example CSS Override",{"type":318,"tag":782,"props":783,"children":784},"p",{},[785],{"type":324,"value":786},"For simplicity, assume you want to modify the header text's appearance. The following CSS rule uses the top-level embed id and targets the specific element that needs styling.",{"type":318,"tag":327,"props":788,"children":790},{"className":329,"code":789,"language":331,"meta":313,"style":313},"#ck-app h1 {\n  color: black;\n  background: yellow;\n  font-style: italic;\n}\n",[791],{"type":318,"tag":334,"props":792,"children":793},{"__ignoreMap":313},[794,812,835,856,877],{"type":318,"tag":338,"props":795,"children":796},{"class":340,"line":341},[797,802,807],{"type":318,"tag":338,"props":798,"children":799},{"style":355},[800],{"type":324,"value":801},"#ck-app",{"type":318,"tag":338,"props":803,"children":804},{"style":380},[805],{"type":324,"value":806}," h1",{"type":318,"tag":338,"props":808,"children":809},{"style":345},[810],{"type":324,"value":811}," {\n",{"type":318,"tag":338,"props":813,"children":814},{"class":340,"line":351},[815,820,825,830],{"type":318,"tag":338,"props":816,"children":817},{"style":355},[818],{"type":324,"value":819},"  color",{"type":318,"tag":338,"props":821,"children":822},{"style":345},[823],{"type":324,"value":824},": ",{"type":318,"tag":338,"props":826,"children":827},{"style":355},[828],{"type":324,"value":829},"black",{"type":318,"tag":338,"props":831,"children":832},{"style":345},[833],{"type":324,"value":834},";\n",{"type":318,"tag":338,"props":836,"children":837},{"class":340,"line":366},[838,843,847,852],{"type":318,"tag":338,"props":839,"children":840},{"style":355},[841],{"type":324,"value":842},"  background",{"type":318,"tag":338,"props":844,"children":845},{"style":345},[846],{"type":324,"value":824},{"type":318,"tag":338,"props":848,"children":849},{"style":355},[850],{"type":324,"value":851},"yellow",{"type":318,"tag":338,"props":853,"children":854},{"style":345},[855],{"type":324,"value":834},{"type":318,"tag":338,"props":857,"children":858},{"class":340,"line":391},[859,864,868,873],{"type":318,"tag":338,"props":860,"children":861},{"style":355},[862],{"type":324,"value":863},"  font-style",{"type":318,"tag":338,"props":865,"children":866},{"style":345},[867],{"type":324,"value":824},{"type":318,"tag":338,"props":869,"children":870},{"style":355},[871],{"type":324,"value":872},"italic",{"type":318,"tag":338,"props":874,"children":875},{"style":345},[876],{"type":324,"value":834},{"type":318,"tag":338,"props":878,"children":879},{"class":340,"line":405},[880],{"type":318,"tag":338,"props":881,"children":882},{"style":345},[883],{"type":324,"value":884},"}\n",{"type":318,"tag":782,"props":886,"children":887},{},[888,890],{"type":324,"value":889},"Here's how that looks in Chrome dev tools.\n",{"type":318,"tag":891,"props":892,"children":895},"img",{"alt":893,"src":894},"Featured Image","/img/dev-tools-css-override.png",[],{"type":318,"tag":897,"props":898,"children":899},"style",{},[900],{"type":324,"value":901},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":313,"searchDepth":366,"depth":366,"links":903},[904,905],{"id":321,"depth":351,"text":325},{"id":773,"depth":351,"text":780},"markdown","content","2.cancel-flows/4.custom-styling.md","2.cancel-flows/4.custom-styling","md",{"loc":34},[913,914],{"_path":29,"title":28,"description":31},{"_path":39,"title":38,"description":41},1775515566755]