When adding custom HTML to Wix, the process is slightly different than other website editors, for the following two reasons:
1. The HTML element box is manually-sized in the Wix editor
2. You have to edit the desktop and mobile view separately
The option to directly embed a campaign onto your website is one of our favorite and most-used integration options. It is ideal for adding an integrated call-to-action to your webpage, and is most commonly used on general donate pages, such as this one.
To create a direct embed like this one, go to the Integration Center section in the Main Menu, and follow the steps within the Code Generator section.
1. Select if you'd like to embed a Campaign or Campaign Menu.
2. Select which campaign or menu you'd like to embed (please note, only Active campaigns and menus will be available in the Code Generator)
3. Once you pick a specific campaign (or menu) you will be shown a section to Select Integration Type. From here, choose the third option at the top row - Direct embed Integrated Campaign on a webpage.
4. Once selected, you'll see a live preview of the campaign you are embedding and a toolbar above that allows you to customize a few things. Most commonly, you'll want to take a look at and adjust the height to remove any unnecessary scrollbars from within the campaign preview. Most campaigns need to be 700 pixels tall or more. Choose the border color you would like, if any. The customization options you choose here will be automatically reflected in your live preview.
6. Once you're happy with what you see in the live preview, click Generate Code, then Copy & Paste the code displayed into the area of your website where you want this embed to appear. Make sure you're working in Desktop editing mode. (In most website editors, this has to be done in a specific HTML editing block or element, these are usually called things like "Inject Code" "Custom HTML" or "Embed Code.")
7. Once pasted, you'll need to manually make two adjustments directly inside the code. You will need to adjust the iframe dimensions to be the following: height:97%; width:100%
8. Then, use the container to adjust the size of the container with your cursor. Stretch the container left and right edges to be in line with your current page body width area, or less if you prefer it to take up less than the full width. Make sure to not extend the container outside of the body of the page to keep it functional. Then, stretch the vertical part far enough down to eliminate any scroll bars. Save changes.
9. Once everything is sized the way you'd like in Desktop mode, switch to the Mobile view and resize the same container again in mobile. In Mobile view, make sure that the element edges are stretched all the way to the edges of the screen to keep the embedded campaign easy to navigate on small screens. Then, stretch the vertical part far enough down to eliminate any scroll bars. Then save your changes.
10. Preview both modes to ensure all looks good, then go ahead and hit Publish to make the new changes live on your website.