APIs
Nudge API
in addition to the nudge editor in our platform, nudges also comes with a powerful api that let's you create, control and make use of various events the nudge api can also be used in addition to nudges created with the platform, to easier maintain the text fields used nudge types there's various types of nudges to make use of, based on your needs each type comes with its own properties and functionality, but all share a set of the same values values needs to be wrapped in a sections array, to split up object throughout the nudge as well see each nudge type below for example recipes nudges created with the editor each have a identifying slug string, which is used when calling the nudge from the api form nudge a form nudge is a great way to handle subscriptions on your website without being too intrusive, for example a newsletter signup, or to download an e book it comes with a call to action in form of an input and a button when the form is submitted it can call a webhook, and trigger a specific dialogue of your choice example recipe { 	"dialogueid" "a6e66595 88e1 46d7 9dbb 947ad87a5973", 	"webhook" "https //example com/signup", 	"sections" \[ 	 { 	 "title" "want to stay up to date?", 	 "description" "sign up for our newsletter and never miss our best offers!" 	 }, 	 { 	 "form" { 	 "input" { 	 "label" "email", 	 "type" "email", 	 "placeholder" "test\@example com", 	 "required" true 	 }, 	 "button" { 	 "title" "sign up" 	 } 	 } 	 } 	] } product nudge with the product nudge you can showcase a hand picked selection of products, and is great for promoting either current offers or best sellers similar to the form nudge it also comes with a call to action, but in the form of a button each product is represented with a image, title, description, price and call to action in the example below, we use multiple sections to divide up our nudge content example recipe { 	"sections" \[ 	 { 	 "title" "our best sale continues!", 	 "description" "50% on our most popular shoes ", 	 "buttons" \[ 	 { 	 "label" "view all", 	 "value" "http //example com/sale" 	 } 	 ] 	 }, 	 { 	 "products" { 	 "title" "the most popular products ", 	 "items" \[ 	 { 	 "title" "adidas", 	 "description" "stan smith white", 	 "image" "http //lorempixel com/200/200/shoes/", 	 "price" "699, ", 	 "producturl" "http //example com/stan smith", 	 "linkurl" "http //example com/sale", 	 "linktext" "view all on sale" 	 } 	 ] 	 } 	 } 	] } multiple choice multiple choice nudge is a great way to collect feedback on various aspect of your website it supports an array of buttons, which each has an attached dialogue it will trigger when pressed in the example below, we use multiple sections to divide up our nudge content example recipe { 	"sections" \[ 	 { 	 "title" "product feedback", 	 "description" "you seemed interested in our product! we would love to know you didn't want to try it " 	 }, 	 { 	 "choices" { 	 "buttons" \[ 	 { 	 "text" "i love it", 	 "triggerdialogue" "a4bfc101 3a07 4c16 955d 9aa9575666c6" 	 }, 	 { 	 "text" "i hate it", 	 "triggerdialogue" "a4bfc101 3a07 4c16 955d 9aa9575666c6" 	 }, 	 { 	 "text" "i didn't understand", 	 "triggerdialogue" "a4bfc101 3a07 4c16 955d 9aa9575666c6" 	 }, 	 { 	 "text" "other", 	 "triggerdialogue" "a4bfc101 3a07 4c16 955d 9aa9575666c6" 	 } 	 ] 	 } 	 } 	] } combining nudge from editor and api when using the api to trigger a nudge, it's possible to pass both a nudgelayout object, and a slug string when this is done, both nudges will be combined into one this can be useful if you have nudge created using the api, but need to easily maintain texts from the platform custom nudge the custom nudge is a more powerful nudge type, which let's you completely customize the contents of the nudge it accepts either a string or a function, which can contain some html code custom nudges supports its own trigger function, depending on whether or not you want our template to wrapp your nudge or build your own html as string if you want the nudge to be completely custom, it's fine to send in the html as a string see example below const html = ` \<style> nudge text { width 50%; } p { color #333; font size 14px; } \</style> \<div class="nudge wrapper"> \<div class="nudge text"> \<p>here you can display whatever contents you want \</p> \<p>styling is also supported, and will be renderrerd!\</p> \</div> \</div> \<script> console log("even script tags are supported!"); \</script> `; html as function html can be passed as a function to make use of text content from the platform this is useful if you have a custom nudge solution, but need to easily maintain its texts simply create a custom nudge from the editor, and call the text blocks slug to display it const html = (textcontent) => ` \<style> nudge text { width 50%; } p { color #333; font size 14px; } \</style> \<div class="nudge wrapper"> \<div class="nudge text"> \<p>${textcontent slug}\</p> \<p>${textcontent anotherslug}\</p> \</div> \</div> `; triggering a custom nudge triggering a custom nudge is slightly different than the other nudge types, as it uses html content you can choose between using our nudge template, or create your own from scratch the template includes our nudge element with built in styling and responsiveness using our nudge template, the content sent as it can be triggering like this const html = ` \<div> \<p>html contents\</p> \</div> `; const nudgelayout = { 	sections \[ 	 { 	 html, 	 }, 	], }; window\ kindlychat shownudge({ nudgelayout }); on the other hand, a completely custom solution use the following function const content = ` \<div> \<p>html contents\</p> \</div> `; const onrendered (element) => (element style height = "3000px"); window\ kindlychat showcustomnudge({ content, onrendered }); functions and callbacks for a comprehensive list of functions and callbacks can be found here https //docs v2 kindly ai/chat api#qc callback reference deprecated
Updated 06 Oct 2023
Did this page help you?