Hello everyone, I am a huge fan of the custom element, I build multiple custom element in the past using js, svelte ( JS Framework ), Stencil JS (Custom element compiler). All my examples code are in Github. Anyway, I am here to show an Alert component that build using Svelte. Svelte JS is a compiler to build SPA(Single Page Application) other words Website. We can also use it to build custom element The code is Open source with MIT license https://github.com/Salman2301/wix-alert-component Example Site: https://www.test.salman2301.com/alert-web-component How to Install Easy way is to use Custom elment in Wix site is by using with Wix Block. It provide some level of IDE support. Click on this link. Follow the step to Install the Wix Block on any Wix site. Drag and Drop the Widget or Wix Block. Change the element Id to widgetAlert via the properties panel. Drag and Drop a Custom element under Add Element/Embed/Custom Element and change the Id to CustomAlert via properties panel. Click on the Custom element and select Change source. Select Server URL paste this URL https://cdn.jsdelivr.net/gh/salman2301/wix-alert-component@master/dist/index.js Set the Tag Name to alerts-component Add the following code in the page sections. // page code.js $w.onReady(function () { // This step is needed to let the Wix Block select the Custom element $w('#widgetAlert').setCustomElement($w('#CustomAlert')); // This will show Warning Alert $w('#widgetAlert').alert("This is a warning message." ) }); Note: for the alert method, You can pass a string or object // using string $w('#widgetAlert').alert("This is a alert message." ) Is same as this // using object $w('#widgetAlert').alert({ message: "This is a alert message." }) You can also pass more options like title, type of alert, wait time, style using the object method Checkout below attribute new alert $w('#widgetAlert').alert({ title: "Hello", message: "Welcome to the site." }) If you are not comfortable with Wix Block. You can just directly copy and paste the code in the public JS file To learn more check the Github Doc https://github.com/Salman2301/wix-alert-component

This is almost the exact sample wix-crm doc provide I am running this code when http endpoint is trigger using wix-http module so, when a zapier hit the http-function URL in http-function.js it will run insContact function in contact.jsw file all the data are been send to contact.jsw file but still there is the error. Error => "Bad Request: please check the user inputs." Logs code // contact.js import wixCrm from 'wix-crm-backend'; export async function insContact(user) { try { console.log("ins Contact : " , user); let {firstName, lastName, email} = user; let contact = { "firstName": firstName, "lastName": lastName, "emails": [email] } console.log("Contact : " , contact); let contacted = await wixCrm.createContact(contact); console.log("contacted : ", contacted) return contacted; } catch (err) { console.log("Error : " , err.message); } }

If.you are like me, working at night or starring screen for hours straight to write codes and also wanna take care of your health. I would highly recommend this extension which I have been using for a week. I created this extension for myself as corvid doesn't support the dark theme. I give this extension to some of my Wix partners and they loved it. All the code is available to edit and commented so, you can change different color which works best for you have fun playing with it. :) I have some other future plan 1. able to change site structure and database color to dark 2. have a dropdown to select different theme/ color, so anyone can change the color. 3. able to increase the font size (i try to increase using CSS but it didn't work). 4. able to change the color of the selected text and indentation line ( i can't select the indentation using the chrome dev tools, therefore I can't get the class name to manipulate the element.) and I hope you like it too. take care  :) Install link: https://www.salman2301.com/mytheme

Now with the help of npm we can easily create a PDF using pdf generator api A PDF is created and downloaded when the user submited a form. Usage: Create a Invoice, Create a certificate for the user etc. Sample Website link Requirement: 1. Free account in pdfgeneratorapi Overall Layout: i) PDF GENERATOR API ii) Wix code Backend (npm - pdf-generator-api) iii)Page Code iv) HTML Embed code (Convert Base64 into PDF file) i) PDF GENERATOR API 1. Goto pdfgeneratorapi 2. Sign In and goto Dashboard 3. Select the "Template" on the left side bar 4. Click on the "New Template" button, A new window open to edit the pdf File 5. Design the PDF and to create a variable use open and close Curly brackets as shown on this image [This is a image of the pdf generator Editor {Name} where the variable will be later assign using wix code And there is one more variable,{Detail} to add the message] 6. Publish the template and Goto the "Templates" from the Dashboard 7. Copy the Template Id from the "Templates" 8. Copy the APIKey and APISecret from the "Account Settings" 9. Copy the WorkSpace Identifier from the "Admin Panel" ii) Wix code Backend 1. Search and Install "pdf-generator-api" npm (Check this link for Installation guide and Node package manager npm) 2. Create a Backend Web Module "pdf.jsw". 3. Copy and paste the code // Code start import PDFGeneratorAPI from 'pdf-generator-api'; export async function pdf(name, detail) { let Client = new PDFGeneratorAPI( '<APIkey>', '<APISecrect>' ); Client.setWorkspace('<WorkSpace identifier>'); let obj = { "Name" : name, "Detail" : detail, } let response = await Client.output('<Template Id>', obj) return response.response } // Code end 4. Replace the <APIkey> , <APISecrect> , <WorkSpace identifier> and <Template Id> to your corresponding value grab from the pdfgeneratorapi site 5. Create a object for the variable in this case i have create an object "obj" with two Key "Name" and "Detail" and the corresponding value directly from the parameter of this async function "name" and "detail" iii)Page Code 1. Drag and drop Input element, Text box element and Button in a new page 2. Also Drag and drop the "HTML embed" element from "more" section 3. Change the Property name as shown in the image 4. Copy and paste the below code // Code start import { pdf } from 'backend/pdf.jsw'; $w.onReady(function () { var base64; $w('#btnSubmit').onClick(() => { let name = $w('#inName').value; let detail = $w('#inDetail').value; pdf(name, detail).then(e => { base64 = e; base64 = 'data:application/pdf;base64,' + base64 let msg = { "conv": true, "dataUrl": base64 } $w('#html1').postMessage(msg); }); }); }); // Code end iv) HTML Embed code 1. Click on the HTML embed element 2. Click on "Edit code" button 3. Paste the following code [updated 02-dec-2018] <!-- code start --> <script> window.onmessage = event => { if(event.data.conv) { if(document.getElementById('Download') === null || document.getElementById('Download') === undefined){ var pn = document.createElement('a') pn.download = 'Download.pdf'; pn.title = 'Download pdf document'; pn.textContent = 'Download'; pn.id ='Download' var s = document.getElementsByTagName('body')[0].appendChild(pn); pn.href = event.data.dataUrl; } else { let d = document.getElementById('Download') d.href = event.data.dataUrl; } document.getElementById('Download').click() } } </script> <!-- code end --> Overall codes Congrats! That's it Original post : https://www.salman2301.com/forum/wix-code-advance/create-pdf-using-wix-code-and-pdf-generator-api Let me know if you have any questions