How Can I Get the Code for My Prayer Widget?
1. In your admin panel, navigate to the "Widgets Setup" section and click the "Copy to Clipboard" button next to your Prayer widget.
2. You can also easily and quickly forward the widget code along with installation instructions to your web master via email using the "Send Instructions" button.
Webflow
1. Log in to your Webflow account.
2. Select your site and click "Open Designer"
3. In the list of pages on your site, select the desired page or add a new one, for example, "Prayer"
4. Using the "Add Elements" button at the top left, add a "Section" element to the place on your page where the widget should be.
5. Using the same "Add Elements" button, select the "Code Embed" element in the "Advanced" section.
6. Paste the code for your Prayer widget into the "Code Embed Editor" window that appears and click the "Save & Close" button at the bottom of this window.
7. If done correctly, the widget block should look like the screenshot.
8. Click the "Publish" button at the top right to publish the changes.
9. Your widget is published on the site once the button status changes to "Published"
WordPress
1. Set Row to zero paddings and margins in the Advanced tab
2. Set Row width to 1200px
3. Set HTML block to zero margins
4. If there is text on the page, in the main section, it should add a class .text-paragraph
5. Add styles if there are large paddings:
.wrap {
padding-left: 0;
padding-right: 0;
}
#content {
padding: 0 !important;
}
6. If "Enforce night mode" is enabled, then the body is assigned the class "darkMode" and a dark background-color when night mode is enabled. You can add styles to your CSS and change the behavior of all elements on the page. For example: .darkMode p { color: #fff; } and so on. You can also add !important if the selector weight is very high. For example: .darkMode p { color: #fff !important; }. If a class is set for all texts .text-paragraph, then add styles: .darkMode .text-paragraph { color: #fff; }
Also, it may be worth changing the background-color of the section content to transparent by adding styles to the corresponding class background-color: transparent. Blocks can have different selectors, for example .site-content-contain или #Wrapper or other.
7. In order for the styles to spread to one page, you need to look in the body ID of the page, it is indicated in the class. Here are instructions on where to look: https://medium.com/gobeyond-ai/how-to-use-custom-css-on-specific-pages-in-wordpress-d7bf04e7cce5
Next, add the ID to the styles:
.page-id-12915 .wrap {
padding-left: 0;
padding-right: 0;
}
.page-id-12915 #content {
padding: 0 !important;
}
.page-id-12915 .site-content-contain {
background-color: transparent;
}
.page-id-12915.darkMode .text-paragraph { color: #fff; }
Wix
Important: Only premium Wix users on sites with their own domain and Wix ads removed can work with custom elements.
1. Open the Wix website and log in to your account.
2. On the menu on the left, select Site & App and go to site customization by clicking Edit Site
3. From the top menu, select Dev Mode and turn on the toggle Enable Developer Mode
4. Click Add Elements on the left side of the Editor.
Click Embed Code.
Click Custom Element to add it to your page.
5. Place this element in a convenient location in the center and stretch it to the width of the page
6. Click Set Attributes and set the new id attribute with the value app-widget
7. Click Choose Source and select Velo file. In the Tag name field, enter the value div-widget. Click on the Select one of your Velo files field and click on the Create New button.
8. At the bottom of the screen, in the window wix-default-custom-element.js, the code will appear
9. Delete all code
10. Switch to mobile mode, stretch the widget to full width, and set the height to at least 250px.
11. Click Publish in the top right corner
12. Hover over the Wix logo in the upper left corner and go to the Dashboard.
13. In the side menu on the left, select Settings, and in the ADVANCED section go to Custom code.
14. Click the Add Custom Code button at the top left. In the Paste the code snippet here field, paste the widget code by deleting this line from it: <div id="app-widget"></div>
Select the page on which the Custom element is embedded.
In the section Place Code in, select the option Body - start.
Click Apply.
Church Plant Media
1. Log in
2. Switch to the Publish tab at the top
3. In the Pages section, click the + Add a New Page button
4. Give a title to the page if you need to change the URL, and in the Content section, click the Edit HTML button and paste the code.
5. To correct errors, add the following code below.
<script>
var css = `
.full-width {background: transparent !important;}
#subpage #content {background: transparent !important;}
#subpage #content .wrapper {background: transparent !important;}
.post-share-under {display: none;}
#app svg {padding-bottom: 0;}
#subpage #content #app p {line-height: 1;}
@media screen and (min-width: 1350px) {#subpage #content #app p {line-height: 1;}}
#subpage #content #app .frpr-card__text {line-height: 1.7;}
@media screen and (min-width: 1350px) {#subpage #content #app .frpr-card__text {line-height: 1.7;}}
#subpage #content #app .frpr-button {padding: 11px 12px;}
#subpage #content #app .frpr-button p {font-size: inherit;}
@media screen and (min-width: 1350px) {#subpage #content #app .frpr-button p {font-size: inherit};}
#app i {padding-bottom: 0;}
#subpage #content #app p {color: inherit;}
#subpage #content #app .frpr-signup__text {color: #7f8b92;}
#app {width: 100%;}
#subpage #content #app h5 {font-size: 12px; line-height: 1; font-weight: 400; text-transform: inherit;}
`;
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
</script>
6. On the right side, click the Publish Page button
7. On the left side, switch to the Navigation section and click the + NEW button
8. Add a Label, select a page and click the Add New Item button.
9. If there are problems, you need to fix the code in paragraph 5. Your web developer can do this, or you can contact us at support@impactfactors.net or fill out this form.
Share Faith
1. Open the site and log in
2. Select Pages on the left and click the + Add New Page button
3. Give the page title, select Blank, and click the next arrow.
4. In the central area, click Feature.
5. Select HTML & Code
6. You can leave out the title and insert the code.
Below is another piece of code to correct errors
<script>
var css = `
#content {height: auto !important;}
`;
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
</script>
Click SAVE
7. Click Save in the central area
8. In the upper right corner, click Publish Options and then click Publish all.
SquareSpace
1. Go to the page where you want to insert the code, move the cursor to the right place, a small menu appears, click Edit
2. Move the cursor over the desired area, a button with "+" will appear, press
3. A menu will open on the right side of the screen, scroll down and select Embed
4. In the menu that appears, click Code Snippet
5. Next Embed data
6. Paste the code into the area, close the menu
7. Click Save
If you will need help, please provide a temporary access to your website CMS/admin. We would suggest temporarily adding a new user for us in your CMS, and after everything is set up, you can remove it.
Please make sure to add the following user/email to your website CMS:
After we receive the invite, one of our developers will set up and customize the widget on your website. After it's done, we will let you know, so you can finalize and move to the launch phase (we've created tons of materials to help you with it!).
If you need help and would like to talk in Zoom, please pick the best time for you here.
If at any time, you will have questions, please email us at support@impactfactors.net or fill out this form.