Is there a way to create a feedback form?


(Einnes) #1

Is there a way to create a page in Stoplight that would collect feedback or information? Say I wanted to get somebody’s email or something like that. My impression is Stoplight doesn’t support something like this, but I wanted to check to be sure.


(Taylor Barnett) #2

You would need to use some custom JavaScript of your own to do this. @tatiana.perry or @nikita.ahuja might be able to share how they did it for their docs at https://developer.bigcommerce.com/api-docs, which did something like this for docs feedback.


(Einnes) #3

Okay I wrote them a message. That form is really cool.


(Tatiana Perry) #4

I just replied to you. So sorry, I didn’t not get a notification. I will also cross post here for others to see. Nothing propriety just careful js. :slight_smile:

We are using JotForm and the Stoplight JavaScript box. To make it run, we had to write a function that builds and appends the script tag to the site. This is how all the JS on our site runs. The main page animation, the changelog notifications and the the jotform for feedback.
The function is broken down in the main parts of a script tag. This should be repeatable with any feedback form or anything else that requires a script tag to run. We wanted ours to appear on all pages, so we didn’t worry about restricting it.

function jotForm(){
	var jotFormScript = document.createElement('script');
    jotFormScript.type = 'text/javascript'; // script tag type
    jotFormScript.src = "{your-jotform-src}" //script src
    jotFormScript.text = 'new JotformFeedback({formId: "{your-form-id}",buttonText: "{your-text}",base: "https://form.jotform.com/",background: "#4E75F8",fontColor: "#FFFFFF",buttonSide: "bottom",buttonAlign: "right",type: 1,width: 530,height: 380,isCardForm: false});' //script text
	document.body.appendChild(jotFormScript); //where to put the script
}

//home page animation
function animationHeader(){
	var script = document.createElement('script');
	 script.type = 'text/javascript';
	 script.src = '{your src}';
	 script.onload = function loadAnimation(theObject) {
		var container = document.getElementById('animateBg');
		lottie.loadAnimation({
			container: container, // the dom element that will contain the animation
			renderer: 'svg',
			loop: true,
			autoplay: true,
			path: '{your-path}' // the path to the animation json
		});
	}
	var head = document.getElementsByTagName('head')[0]; //where to append in the head
	head.appendChild(script);
}

//function to load the scripts in the order we want. 
function start() {
        animationHeader();
	jotForm();
}

//run the scripts on window load
window.onload = start;

(Einnes) #5

what is the part about the animation header?


(Tatiana Perry) #6

That is not included in the example. I just included examples of how we are running any javascript on our site


(Einnes) #7

Okay thanks! I tried it and I got a prototype working!