{"_id":"543eca52d924f608003528c4","version":{"_id":"543c845ee443e3080085b330","project":"543c845ee443e3080085b32d","__v":6,"createdAt":"2014-10-14T02:03:10.835Z","releaseDate":"2014-10-14T02:03:10.835Z","categories":["543c845ee443e3080085b331","543c8794ea519d0800c91164","543d2918a22ffb0800a7af90","543d5da831ca981a00a6fead","543ecfc115d0560800502706","546165ea92398320003c7c79"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"is_link":false,"project":"543c845ee443e3080085b32d","user":"543c844ae443e3080085b32b","category":{"_id":"543d5da831ca981a00a6fead","project":"543c845ee443e3080085b32d","version":"543c845ee443e3080085b330","__v":7,"pages":["543d61e7a10ab32000b3ab39","543d7c3331ca981a00a6ff42","545002cd3c6f700800a9b3b4","543ebd4dcc182e08005d0ce4","543ec2d2cc182e08005d0d05","543eca52d924f608003528c4","55cd13fca15ad619004af398"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-10-14T17:30:16.009Z","from_sync":false,"order":3,"slug":"platform-integrations","title":"Platform Integrations"},"__v":5,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-10-15T19:26:10.146Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","try":true,"basic_auth":false,"auth":"never","params":[],"url":""},"isReference":false,"order":6,"body":"[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Please visit [http://vs.elevio.help/](http://vs.elevio.help/) for our updated documentation.\",\n  \"title\": \"This documentation has been depreciated.\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"Skip to a section:\\n<br>\\n<a href=\\\"#full\\\">Full Page</a>\\n/\\n<a href=\\\"#widget\\\">Widget</a>\\n/\\n<a href=\\\"#popup\\\">Popup</a>\\n/\\n<a href=\\\"#lightbox\\\">Lightbox</a>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Sites and blogs hosted on WordPress.com cannot use ViralSweep because they block JavaScript. This documentation is only for self-hosted WordPress sites.\",\n  \"title\": \"NOTE\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<a name=\\\"full\\\"></a>\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Integrate the full page style\"\n}\n[/block]\nThese steps will show you how to integrate the full page giveaway style into your WordPress site.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"In order for the full page to properly function on WordPress, you will need to add the code to a blank HTML file and upload it via FTP. This file will not contain your site template such as your navigation or footer. Skip to the section for integrating the widget if you want your site template to display around the giveaway.\",\n  \"title\": \"NOTE\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1) Create the giveaway file\"\n}\n[/block]\nNavigate to your ViralSweep dashboard, click 'Get Code' on your giveaway, and copy the code for the full page. Paste the code for the full page giveaway onto a blank HTML file. Save the file with any name you would like, using the .html extension. For this demo, we've named our file 'index.html'.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2) Connect via FTP\"\n}\n[/block]\nNow you will want to connect to your site via FTP. There are a variety of programs you can use to connect via FTP. For this example, we'll be using FileZilla.\n\nOnce connected, you will want to navigate to where your WordPress site files are located.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3) Create a directory\"\n}\n[/block]\nCreate a new directory where your other WordPress directory files are. For this example, we're going to name our directory 'giveaway'.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"4) Upload the file via FTP\"\n}\n[/block]\nDouble click on the new directory you created, and then drop in the HTML file you created containing the ViralSweep code.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"5) You're done!\"\n}\n[/block]\nTo preview your giveaway, you will need to navigate to the URL of where it was uploaded.\n[block:html]\n{\n  \"html\": \"<a name=\\\"widget\\\"></a>\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Integrate the widget style\"\n}\n[/block]\nThese steps will show you how to integrate the widget giveaway style into your WordPress site.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1) Copy the widget code\"\n}\n[/block]\nNavigate to your ViralSweep dashboard, click 'Get Code' on your giveaway, and copy the code for the widget.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2) Go to your WordPress admin panel\"\n}\n[/block]\nNavigate to your WordPress admin panel and choose which page, or which post you want to add the widget to.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3) Paste code into the text editor\"\n}\n[/block]\nPaste your code into the text editor, **NOT** into the visual editor.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"NOTE\",\n  \"body\": \"If you paste your code into the text editor, then switch over to the visual editor, it will break the code. You must paste it into the text editor and save or publish the post.\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/JTRkTanAT2m5tRYft3RS_wordpress-1.jpg\",\n        \"wordpress-1.jpg\",\n        \"760\",\n        \"272\",\n        \"#9f5e56\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"4) Hit publish or save\"\n}\n[/block]\nOnce you paste in your code, hit publish or save and view your page. You should see the widget show up. That's it, you're done!\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Troubleshooting\"\n}\n[/block]\nIf you have pasted in your widget code and it is not showing up, these are the most common reasons as to why:\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"You pasted the code into the visual editor and not the text editor. *The code must be pasted into the text editor only.*\",\n  \"title\": \"Code pasted into Visual Editor\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"You pasted the code into the text editor, then switched over to the visual editor. Switching to the visual editor will break the code. You must go back to the text editor, remove the code and paste it back in.\",\n  \"title\": \"Switched to Visual Editor\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"You pasted the code into the text editor and then tried to preview the post and the widget doesn't show up. In order to see the widget, you’ll have to either refresh the preview page several times or publish the post.\",\n  \"title\": \"Refresh the preview or publish post\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Wrong user role\",\n  \"body\": \"You user role must be set to either an admin or an editor in order for the widget to show up. If you do not have one of these user roles, you will not see the widget.\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<a name=\\\"popup\\\"></a>\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Integrate the popup style\"\n}\n[/block]\nThese steps will show you how to integrate the popup giveaway style into your WordPress site.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1) Copy the popup code\"\n}\n[/block]\nNavigate to your ViralSweep dashboard, click 'Get Code' on your giveaway, and copy the code for the popup.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2) Go to your WordPress admin panel\"\n}\n[/block]\nNavigate to your WordPress admin panel and choose which page, or which post you want to add the popup to.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3) Paste code into the text editor\"\n}\n[/block]\nPaste your code into the text editor, **NOT** into the visual editor.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"NOTE\",\n  \"body\": \"If you paste your code into the text editor, then switch over to the visual editor, it will break the code. You must paste it into the text editor and save or publish the post.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"4) Hit publish or save\"\n}\n[/block]\nOnce you paste in your code, hit publish or save and view your page. You should see the popup show up. That's it, you're done!\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Alternative: Show on all pages\"\n}\n[/block]\nIf you want the popup to show up on all of your pages, you can do this too.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1) Access the template editor\"\n}\n[/block]\nNavigate to your WordPress admin panel and go to **Appearance > Editor.** \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1vQX4BWQgmAhBz5NUSQK_wordpress-2.jpg\",\n        \"wordpress-2.jpg\",\n        \"760\",\n        \"272\",\n        \"#47a8d0\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2) Add code to footer\"\n}\n[/block]\nOn the right hand side under 'Templates' click on 'Footer'. Scroll to the bottom of the footer file and paste in the popup code above the closing body tag.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/TxSFNAe2TEeLugFKix8J_wordpress-3.jpg\",\n        \"wordpress-3.jpg\",\n        \"760\",\n        \"272\",\n        \"#395578\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3) Update and view your site\"\n}\n[/block]\nClick 'Update' and then view your site. You should see the popup on every single page.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c4RSnbtSMGnfW4OHIiku_wordpress-4.jpg\",\n        \"wordpress-4.jpg\",\n        \"760\",\n        \"272\",\n        \"#4a85a7\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<a name=\\\"lightbox\\\"></a>\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Integrate the lightbox style\"\n}\n[/block]\nThese steps will show you how to integrate the lightbox giveaway style into your WordPress site.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1) Copy the lightbox code\"\n}\n[/block]\nNavigate to your ViralSweep dashboard, click 'Get Code' on your giveaway, and copy the code for the lightbox.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2) Go to your WordPress admin panel\"\n}\n[/block]\nNavigate to your WordPress admin panel and choose which page, or which post you want to add the lightbox to.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3) Paste code into the text editor\"\n}\n[/block]\nPaste your code into the text editor, **NOT** into the visual editor.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"NOTE\",\n  \"body\": \"If you paste your code into the text editor, then switch over to the visual editor, it will break the code. You must paste it into the text editor and save or publish the post.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"4) Hit publish or save\"\n}\n[/block]\nOnce you paste in your code, hit publish or save and view your page. You should see the lightbox show up. Keep in mind that the lightbox functions on cookies, so if you're not seeing it, try viewing the page in a different browser. That's it, you're done!\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Any questions? We're here to help\",\n  \"body\": \"You can reach us at help:::at:::viralsweep.com or talk to us on live chat if we are available.\"\n}\n[/block]","excerpt":"This documentation will show you how to take any ViralSweep giveaway style and integrate it into your WordPress site.","slug":"wordpress","type":"basic","title":"WordPress"}

WordPress

This documentation will show you how to take any ViralSweep giveaway style and integrate it into your WordPress site.

[block:callout] { "type": "danger", "body": "Please visit [http://vs.elevio.help/](http://vs.elevio.help/) for our updated documentation.", "title": "This documentation has been depreciated." } [/block] [block:html] { "html": "Skip to a section:\n<br>\n<a href=\"#full\">Full Page</a>\n/\n<a href=\"#widget\">Widget</a>\n/\n<a href=\"#popup\">Popup</a>\n/\n<a href=\"#lightbox\">Lightbox</a>" } [/block] [block:callout] { "type": "danger", "body": "Sites and blogs hosted on WordPress.com cannot use ViralSweep because they block JavaScript. This documentation is only for self-hosted WordPress sites.", "title": "NOTE" } [/block] [block:html] { "html": "<a name=\"full\"></a>" } [/block] [block:api-header] { "type": "basic", "title": "Integrate the full page style" } [/block] These steps will show you how to integrate the full page giveaway style into your WordPress site. [block:callout] { "type": "warning", "body": "In order for the full page to properly function on WordPress, you will need to add the code to a blank HTML file and upload it via FTP. This file will not contain your site template such as your navigation or footer. Skip to the section for integrating the widget if you want your site template to display around the giveaway.", "title": "NOTE" } [/block] [block:api-header] { "type": "basic", "title": "1) Create the giveaway file" } [/block] Navigate to your ViralSweep dashboard, click 'Get Code' on your giveaway, and copy the code for the full page. Paste the code for the full page giveaway onto a blank HTML file. Save the file with any name you would like, using the .html extension. For this demo, we've named our file 'index.html'. [block:api-header] { "type": "basic", "title": "2) Connect via FTP" } [/block] Now you will want to connect to your site via FTP. There are a variety of programs you can use to connect via FTP. For this example, we'll be using FileZilla. Once connected, you will want to navigate to where your WordPress site files are located. [block:api-header] { "type": "basic", "title": "3) Create a directory" } [/block] Create a new directory where your other WordPress directory files are. For this example, we're going to name our directory 'giveaway'. [block:api-header] { "type": "basic", "title": "4) Upload the file via FTP" } [/block] Double click on the new directory you created, and then drop in the HTML file you created containing the ViralSweep code. [block:api-header] { "type": "basic", "title": "5) You're done!" } [/block] To preview your giveaway, you will need to navigate to the URL of where it was uploaded. [block:html] { "html": "<a name=\"widget\"></a>" } [/block] [block:api-header] { "type": "basic", "title": "Integrate the widget style" } [/block] These steps will show you how to integrate the widget giveaway style into your WordPress site. [block:api-header] { "type": "basic", "title": "1) Copy the widget code" } [/block] Navigate to your ViralSweep dashboard, click 'Get Code' on your giveaway, and copy the code for the widget. [block:api-header] { "type": "basic", "title": "2) Go to your WordPress admin panel" } [/block] Navigate to your WordPress admin panel and choose which page, or which post you want to add the widget to. [block:api-header] { "type": "basic", "title": "3) Paste code into the text editor" } [/block] Paste your code into the text editor, **NOT** into the visual editor. [block:callout] { "type": "warning", "title": "NOTE", "body": "If you paste your code into the text editor, then switch over to the visual editor, it will break the code. You must paste it into the text editor and save or publish the post." } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/JTRkTanAT2m5tRYft3RS_wordpress-1.jpg", "wordpress-1.jpg", "760", "272", "#9f5e56", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "4) Hit publish or save" } [/block] Once you paste in your code, hit publish or save and view your page. You should see the widget show up. That's it, you're done! [block:api-header] { "type": "basic", "title": "Troubleshooting" } [/block] If you have pasted in your widget code and it is not showing up, these are the most common reasons as to why: [block:callout] { "type": "danger", "body": "You pasted the code into the visual editor and not the text editor. *The code must be pasted into the text editor only.*", "title": "Code pasted into Visual Editor" } [/block] [block:callout] { "type": "danger", "body": "You pasted the code into the text editor, then switched over to the visual editor. Switching to the visual editor will break the code. You must go back to the text editor, remove the code and paste it back in.", "title": "Switched to Visual Editor" } [/block] [block:callout] { "type": "danger", "body": "You pasted the code into the text editor and then tried to preview the post and the widget doesn't show up. In order to see the widget, you’ll have to either refresh the preview page several times or publish the post.", "title": "Refresh the preview or publish post" } [/block] [block:callout] { "type": "danger", "title": "Wrong user role", "body": "You user role must be set to either an admin or an editor in order for the widget to show up. If you do not have one of these user roles, you will not see the widget." } [/block] [block:html] { "html": "<a name=\"popup\"></a>" } [/block] [block:api-header] { "type": "basic", "title": "Integrate the popup style" } [/block] These steps will show you how to integrate the popup giveaway style into your WordPress site. [block:api-header] { "type": "basic", "title": "1) Copy the popup code" } [/block] Navigate to your ViralSweep dashboard, click 'Get Code' on your giveaway, and copy the code for the popup. [block:api-header] { "type": "basic", "title": "2) Go to your WordPress admin panel" } [/block] Navigate to your WordPress admin panel and choose which page, or which post you want to add the popup to. [block:api-header] { "type": "basic", "title": "3) Paste code into the text editor" } [/block] Paste your code into the text editor, **NOT** into the visual editor. [block:callout] { "type": "warning", "title": "NOTE", "body": "If you paste your code into the text editor, then switch over to the visual editor, it will break the code. You must paste it into the text editor and save or publish the post." } [/block] [block:api-header] { "type": "basic", "title": "4) Hit publish or save" } [/block] Once you paste in your code, hit publish or save and view your page. You should see the popup show up. That's it, you're done! [block:api-header] { "type": "basic", "title": "Alternative: Show on all pages" } [/block] If you want the popup to show up on all of your pages, you can do this too. [block:api-header] { "type": "basic", "title": "1) Access the template editor" } [/block] Navigate to your WordPress admin panel and go to **Appearance > Editor.** [block:image] { "images": [ { "image": [ "https://files.readme.io/1vQX4BWQgmAhBz5NUSQK_wordpress-2.jpg", "wordpress-2.jpg", "760", "272", "#47a8d0", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "2) Add code to footer" } [/block] On the right hand side under 'Templates' click on 'Footer'. Scroll to the bottom of the footer file and paste in the popup code above the closing body tag. [block:image] { "images": [ { "image": [ "https://files.readme.io/TxSFNAe2TEeLugFKix8J_wordpress-3.jpg", "wordpress-3.jpg", "760", "272", "#395578", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "3) Update and view your site" } [/block] Click 'Update' and then view your site. You should see the popup on every single page. [block:image] { "images": [ { "image": [ "https://files.readme.io/c4RSnbtSMGnfW4OHIiku_wordpress-4.jpg", "wordpress-4.jpg", "760", "272", "#4a85a7", "" ] } ] } [/block] [block:html] { "html": "<a name=\"lightbox\"></a>" } [/block] [block:api-header] { "type": "basic", "title": "Integrate the lightbox style" } [/block] These steps will show you how to integrate the lightbox giveaway style into your WordPress site. [block:api-header] { "type": "basic", "title": "1) Copy the lightbox code" } [/block] Navigate to your ViralSweep dashboard, click 'Get Code' on your giveaway, and copy the code for the lightbox. [block:api-header] { "type": "basic", "title": "2) Go to your WordPress admin panel" } [/block] Navigate to your WordPress admin panel and choose which page, or which post you want to add the lightbox to. [block:api-header] { "type": "basic", "title": "3) Paste code into the text editor" } [/block] Paste your code into the text editor, **NOT** into the visual editor. [block:callout] { "type": "warning", "title": "NOTE", "body": "If you paste your code into the text editor, then switch over to the visual editor, it will break the code. You must paste it into the text editor and save or publish the post." } [/block] [block:api-header] { "type": "basic", "title": "4) Hit publish or save" } [/block] Once you paste in your code, hit publish or save and view your page. You should see the lightbox show up. Keep in mind that the lightbox functions on cookies, so if you're not seeing it, try viewing the page in a different browser. That's it, you're done! [block:callout] { "type": "info", "title": "Any questions? We're here to help", "body": "You can reach us at help@viralsweep.com or talk to us on live chat if we are available." } [/block]