There’s a way to use React to build a custom instalation page? I did not found informations about this in documentation.
2 Likes
@Matheus_Nunes,
Yeah it is possible as like in the app rendering,
you can use assets folder inside config to store your .js and .css and include it in the iparams.html,
Hope it helps 
kindly let us know if you need any example for this
Thanks
2 Likes
Can someone create a sample app for the same?
3 Likes
This is something that is possible to have as a learning resource.
Thanks for pointing this out, we now know this could be of help.
Converting this as a feedback item so that it could be tracked and be closed when the resource is made live.
3 Likes
Do we have a sample yet?
Is it possible to use Vue single page app in custom installation page?
1 Like
Hey All,
Apologies for the delay,
The VUE and the REACT support we introduced natively in the FDK does not support the use of the same framework in the custom installation page,
Although there are a couple of workarounds we can do to support this, please allow us some time, so we can try out all the approaches and come up with a sample app of the best approach.
Stay Safe
Any updates regarding this?
Hi @samuelpares
Did you manage to solve it for Vue? Am on the hunt for something similar for react.
I didn’t. @velmurugan said they would look for a workaround, but I heard nothing until now.
Fair enough. Did spend yesterday morning trying to create a React config app for it, only bad results. 
Hey @Saif, could you check please if there is some progress in this topic?
@velmurugan was going to provide us some way to use react in custom installation page, but we didn’t hear from him anymore.
As some apps demands a lot of configuration, being able to use react would be very helpful.
2 Likes
Ok, So I tried to make it work with CDN, and this is what I could accomplish:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<script src="{{{appclient}}}"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script
type="module"
src="https://unpkg.com/@freshworks/crayons@v4/dist/crayons/crayons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/@freshworks/crayons@v4/dist/crayons/crayons.js"
></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function FreshdeskAuth({ client, done }) {
const { useRef } = React;
const initialValues = {
domain: "",
apiKey: "",
};
const formRef = useRef(null);
const onFormValidate = async (values) => {
let result = {};
if (!values.domain) result.domain = "Domain is required";
if (!values.apiKey) result.apiKey = "API key is required";
return result;
};
const onFormSubmit = async (e) => {
const { values, isValid, errors } = await formRef.current.doSubmit(e);
// const validation = await onFormValidate(values);
// if (Object.keys(validation).length) {
// await formRef.current.setFieldErrors(validation);
// return;
// }
window.iparams.auth = {
domain: values.domain,
apiKey: values.apiKey,
};
done();
};
return (
<div>
<fw-form
ref={formRef}
initialValues={initialValues}
validate={onFormValidate}
>
<fw-form-control
type="TEXT"
name="domain"
required
label="Domain"
id="domain"
>
<div slot="input-prefix" style={{ color: "grey" }}>
https://
</div>
<div slot="input-suffix" style={{ color: "grey" }}>
.freshdesk.com
</div>
</fw-form-control>
<fw-form-control
type="TEXT"
name="apiKey"
required
label="API Key"
id="apiKey"
></fw-form-control>
</fw-form>
<fw-button onClick={onFormSubmit}>Submit</fw-button>
</div>
);
}
const TestPage = () => {
return <p>teste page</p>;
};
const App = () => {
const { useState, useEffect } = React;
const [loaded, setLoaded] = useState(false);
const [page, setPage] = useState(<h3>App is loading</h3>);
useEffect(() => {
const script = document.createElement("script");
script.src = "{{{appclient}}}";
script.addEventListener("load", () => setLoaded(true));
script.defer = true;
document.head.appendChild(script);
}, []);
useEffect(() => {
if (!loaded) return;
app.initialized().then((client) => {
setPage(<FreshdeskAuth client={client} done={done} />);
});
}, [loaded]);
const done = () => {
setPage(<TestPage />);
};
return <div>{page}</div>;
};
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
<script>
window.iparams = {
auth: null,
};
function postConfigs() {
return window.iparams;
}
function validate() {
console.log(window.iparams);
return true;
}
function getConfigs(configs) {
console.log(configs);
}
</script>
</body>
</html>
I packed the app and installed on my test account and it worked.
Perhaps someone can help from now:
- I tried to create each component in a file, but could not make it work. Is it possible?
- The validate in crayons form is not working, it’s not being called on submit. I had to make validation on the submit event. What’s wrong?
- Would be possible to use yup via cdn? I tried and could not make it work.
2 Likes
Hey guys!
I managed to solve the separation of components in files.
I uploaded the code to github, any feedback if it’s a good approach is welcomed.
2 Likes
Great work Samuel! A true hero to the community by sharing source code 
1 Like