Webflow Integration using Zapier

Webflow integration can be done either through Zapier or through webhook. In this article, we’re going to show you the Webflow integration using Zapier.

Find your aNinja embed code before you get started. It is the form integration endpoint from aNinja. This is different for each form.

Sending Webflow form submissions to aNinja through Zapier

  • Log in to your Zapier account
  • Click on Make a Zap
  • ‍Choose Webflow as your Trigger App event
  • Connect the Webflow account. Make sure you are logged in to Webflow on the same browser.
  • Select Form Submission as Webflow trigger
  • Choose your Webflow Account
  • Set up Webflow Form Submission by selecting the site you want to receive notifications from and the Form Name
  • Test Trigger
  • For Action, choose Webhook.
  • For Event, select POST
  • Set up action
  • URL: Copy here the aNinja Form Embed code.Webflow Integration using Zapier
  • Payload Type: form

Mapping Fields

Map the Data on the aNinja fields and Form fields

These are the default aNinja fields:

contact_name

address_street1

address_street2

address_city

address_state

address_postalzip

address_country

company_name

company_url

company_description

contact_email1

contact_email2

contact_phone1

contact_phone2

date_created

user_id

Testing the Integration

  • Click Fetch & Continue to test the Webflow connection. Make sure you have at least one recent form submission created or submit a new form submission on your website before testing the connection. If there’s an issue with the connection troubleshoot your Webflow connection with Zapier (see below).
  • Check aNinja if the test lead got through.
  • Rename the Zap.
  • Publish Zap

Where does the imported data appear?

After the integration, you can search your aNinja CRM for the imported leads. You can also search for any custom field and any other info that is collected from the forms. All the data appear in the Lead View.

  • Lead’s contact (Name, address, email, phone, and email) appears in the leads contact section in the lead view
  • The company’s info appears on the top left of the lead view, in the Company section.
  • Custom fields appear in the custom field section of the lead view
  • Lead Search is a field that also appears in the bottom left of the lead view. Specifically, these are info/links on the lead or the organization found in Google search.

Need help with the Webflow Integration using Zapier? Leave us an email at support@aninja.com. We’re more than happy to assist you.

Adding aNinja Chatbot to your Godaddy Website

Adding aNinja Chatbot to Godaddy Website can be done by using a simple Javascript code. Which is the aNinja Chatbot Embed Code. Find your aNinja Chatbot Embed Code in your aNinja install before getting started.

Adding aNinja Chatbot to Godaddy Website

  1. Log in to your GoDaddy account and click Manage to open GoCentral.
  2. Click Edit/Edit Site.
  3. Then, select the page you would like the widget to appear on. Or alternatively, you can add a new page for the widget. Click the + button or Add.User-added image
  4. Afterward, scroll to the bottom of the Add Section panel, and click HTML.
  5. Click Embed custom code on the page.
    User-added image
  6. Click inside the new section to open up the HTML editor.
  7. Here, in the “Custom Code” box paste the aNinja Chatbot Embed Code.
    User-added image
  8. When you’re finished, click the Done at the top of the HTML panel.
  9. Click Preview to see the results.
  10. Lastly, make any additional changes, and when you’re ready click Publish.

Where do the Chatbot Conversations appear in aNinja

Now that you’ve added your Chatbot to your website, as a result, a new lead is created into your aNinja account after every chatbot conversation.

You can see these conversations:

  • In your inbox. Just select Chatbot from the All types drop down.
  • And in your dashboard widget “Chatbot Conversations”. If you can’t see this widget, just enable it from the little gear on the top right of the dashboard.

Adding aNinja Chatbot to Squarespace Website

Adding aNinja Chatbot to Squarespace Website can be done by using a simple Javascript code. Which is the aNinja Chatbot Embed Code. Find your aNinja Chatbot Embed Code in your aNinja install before getting started.

Adding aNinja Chatbot to Squarespace Website

You can do this yourself or give this code to your developer.

  • In the “Home Menu“, click “Settings
  • Then hit  “Advanced
  • Click “Code Injection
  • Add the aNinja Chatbot embed code into the appropriate Code Injection fields for the footer.
  • After adding your code, click on the “Save” button.

Custom code doesn’t appear?

Custom code may not appear for a few reasons:

  • You’re logged in – As a security measure, code in a code block may not appear for you when you’re logged in, even if visitors can see it. This happens when you try to view embedded JavaScript over a secure connection (https://). To test this, visit your site in an incognito browser.
  • The code is on an index page – Your code might not render if you’ve added it to a page within an index. To test this, remove the page from the index within the Pages panel, then visit your site in an incognito browser.

If the code still isn’t working, reach out to support@aninja.com.

Where do the Chatbot Conversations appear in aNinja

Now that you’ve added your Chatbot to your website, as a result, a new lead is created into your aNinja account after every chatbot conversation.

You can see these conversations:

  • In your inbox. Just select Chatbot from the All types drop down.
  • And in your dashboard widget “Chatbot Conversations”. If you can’t see this widget, just enable it from the little gear on the top right of the dashboard.

Adding aNinja Chatbot to Wix Website

Below are the steps for adding aNinja Chatbot into a Wix Website by using a simple Javascript code.

Adding aNinja Chatbot to a Wix Website

You can do this yourself or give this code to your developer.

  1. On your Wix Website, go to Dashboard > Settings
  2. Click the Custom Code tab in the Advanced section.
  3. Then hit + Add Custom Code at the top right.
  4. Paste the aNinja Chatbot Embed code snippet in the text box.
  5. Enter a name for your code.
    Tip: Give it a name that is easy to recognize so you can quickly identify it later.
  6. Here, select an option under Add Code to Pages:
    • All pages: This adds the Chatbot’s code to all of your site’s pages, including any new pages that you create in the future. Choose whether to load the Chatbot only once per visit or on each page your visitor opens.
    • Choose specific pages: Use the drop-down menu to select the relevant pages.
  7. Specify where to place your code under Place Code in:
    • Head
    • Body – start
    • Body – end
  8. Lastly, click Apply.

Your Chatbot is now embedded into your website. As a result, a new lead is created into your aNinja account after every chatbot conversation.

Where do the Chatbot Conversations appear in aNinja

You can see these conversations:

  • In your inbox. Just select Chatbot from the All types drop down.
  • And in your dashboard widget “Chatbot Conversations”. If you can’t see this widget, just enable it from the little gear on the top right of the dashboard.

Using Bootstrap design for aNinja forms

Bootstrap is a CSS library that you use to create modern websites and web apps. It’s open-source and free to use, yet features numerous HTML and CSS templates for UI interface elements such as buttons and forms. Bootstrap also supports JavaScript extensions. It is used for developing responsive websites.

In aNinja, Bootstrap is used to give aNinja forms a nice-looking design when embed on the website.

However, when embedding aNinja’s forms on your website, it might overwrite the Bootstrap used there.

The Form embed code for the Website

After creating your aNinja form, it generates a Javascript code that you need to embed your aNinja form on your website. It looks like this:

<script id=”aninja-form-1″ data-aninjaform=”true” data-skip_bootstrap=”false” charset=”utf-8″ type=”text/javascript” src=”https://aninja.com/forms/widgets/w1.js?v=”></script><script>aNinja.forms.create({ant:”demo”,form_id:”1″});</script>

We’ve added a data attribute inside this code that enables you to either include or skip Bootstrap design in the form.

Setting the Bootstrap design

  • If you set the Bootstrap design to False, then it excludes aNinja’s Bootstrap design in the form. This allows the website embedding the script to use the Bootstrap design used there, and it doesn’t get overridden. However, if there’s no Bootstrap design used in the website, then the form design will be off, as there won’t be any styling.
  • If you set the Bootstrap design to True, then it uses aNinja’s Bootstrap design and overwrites the one used on the website.
  • Now that you’ve decided whether to include or skip Bootstrap design; just copy the Javascript code and paste it on your website to post your aNinja form there.

If you need any assistance with this, just leave us an email at support@aninja.com. Our Support team will happily assist you!

aNinja keys & codes

In aNinja, you have private keys and codes that you use for your integrations.

It’s important to know your aNinja keys & codes, know how to use them, and where to find them in your aNinja install.

aNinja Keys & Codes

Find your aNinja Forms Embed Code

Find your aNinja Forms Embed Code. You need this code to embed the forms that you’ve created in aNinja on the website.

Find your aNinja Forms Embed Code

  • On the left sidebar, click on Marketing > Forms
  • Select and copy the Embed Code For WebsiteFind your aNinja Forms Embed Code
  • We’ve added a data attribute inside this code that allows you to manage the Bootstrap design in the form. Set it to True or False to either skip or include the Bootstrap design in the form.
  • Paste this Javascript code on your website to add the aNinja form.
  • If you need assistance with embedding your aNinja form on your website, just leave us an email at support@aninja.com. Our Support team will happily assist you!

 

Find your aNinja Chatbot embed code

Now that you’ve created the chatbot playbook, you want to embed it on your website so it starts assisting your website visitors, and collecting leads. Find your aNinja Chatbot embed code that is required to embed your aNinja chatbot on your website.

Find your Chatbot Embed Code

Adding aNinja Chatbot to your Website

Before adding aNinja Chatbot to your Website, you want to create the playbook steps in your install and find the embed code.

Adding aNinja Chatbot embed code to your Website

  • Find your aNinja Chatbot embed codeAdding aNinja Chatbot to your Website
  • Add the Javascript embed code to your website for the aNinja chatbot to start loading on the page.
  • This Javascript snippet will automatically load the chatbot widget onto your site when your website pages load.

Where to add the Chatbot embed code

  • Typically you want to add this code in the HTML section before the closing body tag of your HTML code or layout.
  • If you’re not familiar with basic HTML at all, feel free to contact us for additional support at support@aninja.com.

WordPress website

Additionally, you can also look at the Websites-specific information:

WordPress Websites

Wix Websites

Squarespace Websites

What’s next

  • Once you’ve successfully added the chatbot embed code script to your website, your defined chatbot playbook should start loading on page visits!
  • You’ll also be able to see stats on how the chatbot is performing in your aNinja install.

Why is the Chatbot message popping-up on the first visit only

The chatbot pop-up gets triggered only for the first user visit to your site. It doesn’t automatically re-pop up on their subsequent visits, mainly because it gets annoying for repeat users. However, they can see that it’s in the bottom right section.

If you wish, we can customize this option for you.

Removing aNinja chatbot from your website

The aNinja Chatbot loads on your site because you (or your web developer) added a piece of code on your website that loads it.

Removing aNinja chatbot from your website requires deleting the chatbot from your aNinja install and removing the embed code from your Website.

Find the code in aNinja

<script async data-chatplaybook_id=”1″ data-tenant=”YOUR_TENANT_CODE” src=”https://aninja.com/chatbot/chatwidget_embed_script.js”> </script>

  • Or you can find the chatbot embed code on your website.

Removing aNinja chatbot from your website

  • If you no longer want Chatbot on your website, you should simply remove the piece of code.
  • If you still have access to your aNinja account, you can find the code by looking here:
    • On the left sidebar > Marketing > Chatbot
    • Click on the edit pen next to the chatbot name
    • Once you’ve removed that code from your website, simply hit delete to also delete the chatbot and its playbook in aNinja.Removing aNinja chatbot from a website